如何利用HTML5實(shí)現(xiàn)音頻和視頻嵌入的方法

篇文章主要介紹了HTML5實(shí)現(xiàn)音頻和視頻嵌入的方法的相關(guān)資料，原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Γ【幱X得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

簡(jiǎn)介

HTML5未出來之前，在線的音頻和視頻都是借助Flash或者第三方工具實(shí)現(xiàn)的，現(xiàn)在HTML5也支持了這方面的功能。在一個(gè)支持HTML5的瀏覽器中，不需要安裝任何插件就能播放音頻和視頻。原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Α?/p>

html實(shí)現(xiàn)音頻嵌入(傳統(tǒng)方式)：這種方式雖然可以實(shí)現(xiàn)，但是要瀏覽器支持Flash而且并不能實(shí)現(xiàn)控制，所以要實(shí)現(xiàn)起來很麻煩。

<object height="200" width="200" data="2_1.swf" >

</object>

<embed src="2_1.mp4" type="">

那么也就是說HTML5存在一個(gè)很大的問題就是兼容性。音頻

HTML5支持的音頻格式：

視頻

視頻格式：

由上可知，HTML5貌似支持的格式有點(diǎn)少哈，所以當(dāng)你發(fā)現(xiàn)用HTML5放置音頻和視頻不顯示時(shí)，應(yīng)該就是格式不支持的問題。注： MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)，只有h264才是公認(rèn)的MP4標(biāo)準(zhǔn)編碼(在這也是被坑了，其他格式的只有聲音沒有圖像。)遇到這種問題，就用視頻格式轉(zhuǎn)換器，轉(zhuǎn)換一下格式就OK啦。

音頻實(shí)現(xiàn)起來很簡(jiǎn)單：這里工具條使用了瀏覽器默認(rèn)的工具條。

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的瀏覽器不支持video元素

</audio>

視頻雖然也可以使用瀏覽器默認(rèn)的，但無法實(shí)現(xiàn)私人訂制，所以從學(xué)技術(shù)的角度講，還是要學(xué)習(xí)一下自己做工具實(shí)現(xiàn)功能（audio也可參照此方法）。

audioVideo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>網(wǎng)頁放置視頻</title>

<style type="text/css">

</style>

<script type="text/javascript" src="js/ControlBar.js"></script>

</head>

<body>

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的瀏覽器不支持video元素

</audio>

<video id="myPlayer" width="600" height="400" src="htmls/2_1.mp4" controls="controls" loop="loop" poster="3.jpg">

你的瀏覽器不支持audio元素

<!-- MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)，

只有h264才是公認(rèn)的MP4標(biāo)準(zhǔn)編碼 -->

</video>

<div id="progress"></div>

<input id="volume" type="range" min="0" max="1" step="0.1" onchange="Volume(this)">

<span id="rate">1</span>fps <span id="info"></span>

<button onclick="Play(this)" id="btn1">播放</button>

<button onclick="Fast()">快進(jìn)</button>

<button onclick="Slow()">慢進(jìn)</button>

<button onclick="Prev()">后退</button>

<button onclick="Next()">前進(jìn)</button>

<button onclick="Muted(this)">靜音</button>

</body>

</html>

顯示(html)與功能實(shí)現(xiàn)(js)分離，由外部導(dǎo)入

ControlBar.js

//使用腳本檢測(cè)瀏覽器的標(biāo)簽支持情況

var support = !!document.createElement("audio").canPlayType;

if (!support) {

alert("你的瀏覽器不支持本視頻播放");

}

// 定義全局的視頻對(duì)象

var e1 = null;

window.addEventListener("load", function() {

e1 = document.getElementById("myPlayer");

});

/*前進(jìn)：一分鐘 */

function Next() {

e1.currentTime+=10; //設(shè)置屬性currentTime,快進(jìn)10s

}

/*后退：一分鐘 */

function Prev() {

e1.currentTime-=10; //設(shè)置屬性currentTime,后退10s

}

/*播放/暫停*/

function Play(e) {

if(e1.paused){

e1.play();

document.getElementById("btn1").innerHTML="暫停"

}else{

e1.pause();

document.getElementById("btn1").innerHTML="播放"

}

/*慢進(jìn)：小于等于1時(shí)，每次都只減慢0.2的速率；大于1時(shí)，每次減1 */

function Slow(){

if(e1.playbackRate<=1){

e1.playbackRate-=0.2;

}else{

e1.playbackRate-=1;

}

document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);

}

/*慢進(jìn)：小于等于1時(shí)，每次都只減慢0.2的速率；大于1時(shí)，每次減1 */

function Fast(){

if(e1.playbackRate<1){

e1.playbackRate+=0.2;

}else{

e1.playbackRate+=1;

}

document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);

}

function fps2fps(fps){

if(fps<1){

return fps.toFixed(1);

}else{

return fps;

}

/*靜音*/

function Muted(e){

if(e1.muted){

e1.muted=false;

e.innerHRML="X";

document.getElementById("volume").value=e1.volume;

}else{

e1.muted=true;

e.innerHRML="x";

document.getElementById("volume").value=0;

}

/*調(diào)整音量*/

function Volume(e){

if(e1.muted==true){

e1.muted=false;

}

e1.volume=e.value;

}

/* 進(jìn)度信息：控制進(jìn)度條，并顯示進(jìn)度時(shí)間*/

function Progress(){

var p1=document.getElementById("progress");

p1.style.width=(e1.currentTime/e1.duration)*720+"px";

document.getElementById("info").innerHTML=s2time(e1.currentTime)+"/"+s2time(e1.duration);

}

function s2time(s){

var m=parseFloat(s/60).toFixed(0);

s=parseFloat(s%60).toFixed(0);

return (m<10? "0"+m:m)+":"+(s<10?"0"+s:s);

}

/* 網(wǎng)頁加載完畢后，把進(jìn)度處理函數(shù)添加至視頻對(duì)象的timeupdate事件中*/

window.addEventListener("load",function(){

e1.addEventListener("timeupdate",Progress);

});

/*給window.onload事件添加進(jìn)度處理函數(shù)*/

window.addEventListener("load",Progress);

實(shí)現(xiàn)的功能：播放，暫停，快進(jìn)，慢進(jìn)，前進(jìn)，后退，音量控制，進(jìn)度條和時(shí)間顯示。由此可見通過Audio或Video的屬性和方法可以實(shí)現(xiàn)更復(fù)雜的功能。

紹

howler.js是現(xiàn)代網(wǎng)絡(luò)的音頻庫。它默認(rèn)為Web Audio API，而向后兼容為HTML5 Audio。這使得在所有平臺(tái)上使用JavaScript進(jìn)行音頻操作變得輕松可靠。

Github

https://github.com/goldfire/howler.js

功能特性

單個(gè)API滿足所有音頻需求
默認(rèn)為Web Audio API，向后兼容為HTML5 Audio
處理跨環(huán)境的極端情況和錯(cuò)誤
支持所有編解碼器以全面支持跨瀏覽器
自動(dòng)緩存以提高性能
單獨(dú)，分組或全局控制聲音
一次播放多種聲音
簡(jiǎn)單的聲音元素定義和播放
完全控制衰落，速率，搜尋，音量等
輕松添加3D空間聲音或立體聲聲像
模塊化-使用你想要的內(nèi)容并易于擴(kuò)展
沒有外部依賴，只有純JavaScript
壓縮后7kb大小

瀏覽器支持情況

Google Chrome 7.0+
Internet Explorer 9.0+
Firefox 4.0+
Safari 5.1.4+
Mobile Safari 6.0+ (after user input)
Opera 12.0+
Microsoft Edge

Demo

截圖體驗(yàn)不佳，可以直接看demo

開始使用

安裝

npm install howler
#或
yarn add howler
#或
bower install howler

//使用
<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');

范例

最基本播放mp3

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

更多配置

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3', 'sound.wav'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {
    console.log('Finished!');
  }
});

定義聲音

var sound = new Howl({
  src: ['sounds.webm', 'sounds.mp3'],
  sprite: {
    blast: [0, 3000],
    laser: [4000, 1000],
    winner: [6000, 5000]
  }
});

// Shoot the laser!
sound.play('laser');

事件監(jiān)聽

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// 首次通話后清除監(jiān)聽器。
sound.once('load', function(){
  sound.play();
});

// 聲音播放完畢時(shí)觸發(fā)。
sound.on('end', function(){
  console.log('Finished!');
});

控制多種聲音：

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// 播放返回可以傳遞的唯一聲音ID
//
var id1 = sound.play();
var id2 = sound.play();

// Fade out the first sound and speed up the second.
sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);

ES6語法

import {Howl, Howler} from 'howler';

// 設(shè)置新的 Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// 播放聲音
sound.play();

// 改變?nèi)忠袅?Howler.volume(0.5);

總結(jié)

howler.js讓W(xué)eb音頻開發(fā)變得簡(jiǎn)單可靠，是一個(gè)值得推薦的音頻庫，如果你有這方面的需求，不妨嘗試一下！

TMl 的標(biāo)簽可以分為單個(gè)標(biāo)簽和成對(duì)標(biāo)簽。

單個(gè)標(biāo)簽：html4 規(guī)定單個(gè)標(biāo)簽要有一個(gè) / 表示結(jié)尾， html5 則不用

<!--單個(gè)標(biāo)簽-->
<meta>
<!--成對(duì)標(biāo)簽 -->
<div></div>

以下是HTMl中常用的一些標(biāo)簽

div 標(biāo)簽

div 標(biāo)簽主要用來將相關(guān)的內(nèi)容組合到一塊，就像菜市場(chǎng)把各個(gè)蔬菜分成不同種類區(qū)分?jǐn)[放是一個(gè)道理。

div 是最常見也是比較重要的標(biāo)簽，網(wǎng)頁布局中經(jīng)常使用的一類標(biāo)簽。通常布局被稱為 DIV + CSS 布局

<div>
  div 就是一個(gè)分類的存儲(chǔ)箱子
</div>

p標(biāo)簽

p標(biāo)簽表示段落，在網(wǎng)頁文字中應(yīng)用的比較多

<!--段落和段落間會(huì)換行-->
<p>第一段</p>
<p>第二段</p>

H-標(biāo)題標(biāo)簽

h標(biāo)簽分為六個(gè)

標(biāo)簽	語義
h1	一級(jí)標(biāo)題
h2	二級(jí)標(biāo)題
h3	三級(jí)標(biāo)題
h4	四級(jí)標(biāo)題
h5	五級(jí)標(biāo)題
h6	六級(jí)標(biāo)題

引用標(biāo)題標(biāo)簽后，字體會(huì)加粗、字號(hào)一會(huì)變大

ul 無序標(biāo)簽

無序標(biāo)簽是沒有顯示順序的列表，無序列表前面通常會(huì)有一個(gè)“小點(diǎn)”，這個(gè)小點(diǎn)可以用type屬性控制。其中有三個(gè)展示方式（不過這種方式比較固定，不夠靈活和美觀，已經(jīng)被CSS的效果代替），如下：

值（type屬性）	描述
disc	默認(rèn)值，實(shí)心圓
circle	空心圓
square	實(shí)心方框

舉例:

<!--ul標(biāo)簽內(nèi)部只能放置li標(biāo)簽-->
<!--li標(biāo)簽內(nèi)部可以放其他的標(biāo)簽-->
<ul type=">
    <li>無序列表元素1</li> <!--列表項(xiàng)-->
    <li>無序列表元素2</li>
</ul>




實(shí)心圓
<ul type="disc">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
實(shí)心方框
<ul type="square">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>

ol 有序標(biāo)簽

ol 前面的標(biāo)簽是有序的，可以是數(shù)字、字母、羅馬數(shù)字等。同樣控制這些樣式使用的是type屬性。

type屬性值	意義
a	小寫英文字母編號(hào)
A	大寫英文字母編號(hào)
i	小寫羅馬數(shù)字編號(hào)
I	大寫羅馬數(shù)字編號(hào)
1	數(shù)字編號(hào)（默認(rèn)）

設(shè)置start屬性，表示從哪個(gè)編號(hào)開始
加 reversed 表示倒敘排列

有序列表, 從2開始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小寫字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒敘
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定義列表

dl標(biāo)簽表示自定義列表

dt表示數(shù)據(jù)項(xiàng)，dd表示數(shù)據(jù)定義， dd是dt標(biāo)簽的解釋

<dl>
    <dt>西紅柿</dt>
    <dd>紅、酸</dd>
    <dt>黃瓜</dt>
    <dd>綠、澀</dd>
  </dl>

img標(biāo)簽

img 用來插入圖片，包括但不限于以下圖片格式

圖片格式	備注
.jpg、.jpeg	通常用于照片，是一種有損壓縮格式
.png	通常用于logo、背景，支持透明和半透明。便攜式網(wǎng)絡(luò)圖像
.svg	矢量圖片

<!-- src(source)屬性， 圖片地址，可以為相對(duì)路徑，也可以為絕對(duì)路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網(wǎng)頁上會(huì)展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設(shè)置一個(gè)， 那么另外一個(gè)就會(huì)跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 標(biāo)簽

用a標(biāo)簽來制作超級(jí)鏈接

<!-- href 屬性 表示 其他頁面的鏈接，支持相對(duì)路徑和絕對(duì)路徑，還可以鏈接到其它網(wǎng)站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標(biāo)題， 當(dāng)鼠標(biāo)移動(dòng)到鏈接上，會(huì)展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標(biāo)題">百度</a>






<!--也可以用a標(biāo)簽作為錨點(diǎn) 錨點(diǎn)可以是本頁面的錨點(diǎn)，也可以是其他頁面的錨點(diǎn)-->
<h1 id="title">頭部標(biāo)題</h1>
... 此處省略一些代碼
<a href="#title">返回標(biāo)題</a>




<!--下載鏈接，指向 doc， zip， zip等文件格式時(shí)，a標(biāo)簽將成為自動(dòng)下載鏈接-->
<a href="./download/halou.zip">發(fā)郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統(tǒng)將自動(dòng)打開email相關(guān)軟件-->
<a href="mailto:halouworld@126.com">發(fā)郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統(tǒng)將自動(dòng)打開撥號(hào)鍵-->
<a href="tel:11111111111">打開撥號(hào)鍵盤</a>

audio標(biāo)簽

audio標(biāo)簽用來插入音頻標(biāo)簽

<!--添加 controls 后才會(huì)顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動(dòng)播放屬性-->
<!--loop 屬性表示循環(huán)播放-->
<audio controls src="./video/demo.mp3">
       您的瀏覽器不支持 audio標(biāo)簽，請(qǐng)升級(jí)
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標(biāo)簽，請(qǐng)升級(jí)
</audio>

video標(biāo)簽

video 標(biāo)簽用于插入一段視頻

<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件  -->
<!-- autoplay 自動(dòng)播放 -->
<!-- loop 循環(huán)播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的瀏覽器不支持 video標(biāo)簽，請(qǐng)升級(jí)
</video>

其它區(qū)塊標(biāo)簽

以前的區(qū)塊標(biāo)簽只有div，現(xiàn)在為了更好的方便搜索引擎抓取網(wǎng)站，因此有了以下語義更加明確的區(qū)塊標(biāo)簽

<section>	文檔的區(qū)域，比div語義上還要大一點(diǎn)
<header>	頁頭
<main>	網(wǎng)頁核心部分
<footer>	頁腳

其他的語義標(biāo)簽

span 標(biāo)記文本標(biāo)記區(qū)域，沒有特殊效果，結(jié)合CSS使用

b 標(biāo)簽加粗文章（可以使用CSS實(shí)現(xiàn)同樣效果）

u 加下?lián)Q線文字

br 換行

i 傾斜文字（可以使用CSS實(shí)現(xiàn)同樣效果）

strong 代表特別重要的文字

em 需要強(qiáng)調(diào)的文字，有一定的傾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段獨(dú)立的內(nèi)容 figcaption- figure 內(nèi)部元素的說明性內(nèi)容

表單

表單用來收集信息并且可以完成和后端的數(shù)據(jù)傳輸

表單中大致可以分為三種標(biāo)簽

form標(biāo)簽，標(biāo)識(shí)表單區(qū)域，內(nèi)部的元素都可能被表單提取信息
input 標(biāo)簽，標(biāo)識(shí)輸入、點(diǎn)擊等需要和用戶交互的場(chǎng)景
datalist 下拉框，支持搜索，通常和input一塊使用

一些表單的示例

<!--action 表示要提交到后端的網(wǎng)址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 標(biāo)簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---單選按鈕，name相等，表示選擇了一個(gè)，另一個(gè)就不能選擇了-->
<!--checked 表示默認(rèn)被選中-->
<!-- value 屬性表示要提交到后端服務(wù)器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的標(biāo)簽 通過for 屬性 和 其他標(biāo)簽的id屬性進(jìn)行綁定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--復(fù)選框 type="checkbox" 同一組的的復(fù)選框，name值應(yīng)該相同 ，復(fù)選框也有value值， 用于向服務(wù)器提交數(shù)據(jù)-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球


<!--密碼框-->
<input type="password" placeholder="請(qǐng)輸入密碼">


<!-- 下拉菜單 -->
<select>
  <option value="alipay">支付寶</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分別用于設(shè)置 行數(shù) 和 列數(shù)-->
<textarea rows="3" cols="5"></textarea>


<!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡(jiǎn)寫為  <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
    <input type="reset" value="重置按鈕"> 
    <input type="submit" value="提交表單">




<!--像 email 和 url 等格式，如果點(diǎn)擊提交按鈕，不符合格式，會(huì)有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時(shí)間空間: <input type="time">  <br/>
    日期時(shí)間空間 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    數(shù)字控件: <input type="number"> <br/>
    拖拽條: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    網(wǎng)址控件: <input type="url"> <br/>
    郵箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 備選項(xiàng)示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

table 標(biāo)簽表示表格

tr 表示行
td 表示單元格
caption 表格的標(biāo)題，通常放在表格的第一行
th 表示列標(biāo)題

<!--表格示例-->
<table border="1">
  <caption>我是標(biāo)題</caption>
  <tr>
      <th>第一列標(biāo)題</th>
      <th>第二列標(biāo)題</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

單元格的合并, clospan 用來設(shè)置td 或者th的列跨度， rowspan屬性用來設(shè)置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是標(biāo)題</caption>
    <tr>
        <th>第一列標(biāo)題</th>
        <th>第二列標(biāo)題</th>
    </tr>
    <tr>
        <td colspan="2">跨兩行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是標(biāo)題</caption>
        <tr>
            <th>第一列標(biāo)題</th>
            <th>第二列標(biāo)題</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他標(biāo)簽， thead 定義表頭， tbody 定義表格的主題內(nèi)容， tfoot 標(biāo)簽定義表格底部，通常用來匯總等

在線咨詢

上一篇：HTML 鏈接
下一篇：VR全景電子商務(wù)方案/APP/小程序/公眾號(hào)/網(wǎng)站

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

如何利用HTML5實(shí)現(xiàn)音頻和視頻嵌入的方法

紹

Github

功能特性

瀏覽器支持情況

Demo

開始使用

范例

總結(jié)

div 標(biāo)簽

p標(biāo)簽

H-標(biāo)題標(biāo)簽

ul 無序標(biāo)簽

ol 有序標(biāo)簽

dl 自定義列表

img標(biāo)簽

a 標(biāo)簽

audio標(biāo)簽

video標(biāo)簽

其它區(qū)塊標(biāo)簽

其他的語義標(biāo)簽

表單

表格

您的項(xiàng)目需求