HTML基礎(chǔ)篇-17HTML之視頻播放

頻是網(wǎng)頁承載內(nèi)容很重要的一個元素，也是必不可少的網(wǎng)頁表現(xiàn)形式（圖、文、表、視、音）之一。曾經(jīng)網(wǎng)頁要想播放視頻、制作游戲，必須得用第三方插件flash。不僅編寫代碼要使用額外的語言，瀏覽器也必須得裝第三方插件，非常不方便。隨著html5標(biāo)準(zhǔn)逐漸普及，移動端、pc端開始拋棄flash，如今幾乎所有的瀏覽器都使用html5來制作視頻。

目標(biāo)

了解Flash為何會被淘汰？
如何設(shè)置視頻播放？
視頻播放支持哪幾種視頻格式？

flash崛起--網(wǎng)頁標(biāo)準(zhǔn)的恥辱

flash是Adobe公司其中之一的產(chǎn)品。它發(fā)起于W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭，它撿了個大便宜，乘機(jī)定義網(wǎng)頁媒體標(biāo)準(zhǔn)。

W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭

flash填補了當(dāng)時網(wǎng)頁只有文字和圖片的單調(diào)世界，將媒體（視頻、音頻、游戲）引入了網(wǎng)頁，將網(wǎng)頁帶進(jìn)多彩的世界。

Flash能夠用僅僅十幾K到幾百K的體積，呈現(xiàn)出放大也不會失真的矢量彩色動圖，甚至還能夠做出足以令人沉迷一整天的Flash小游戲。

火柴人

Flash用第三方插件的身份，幾乎制霸了網(wǎng)頁媒體的標(biāo)準(zhǔn)，讓W(xué)3C尷尬不已，甚至從某種程度上說，讓真正的網(wǎng)頁標(biāo)準(zhǔn)推廣受阻。

flash衰敗--HTML5崛起并全面普及

2010年4月，蘋果CEO公開表示從此蘋果所有產(chǎn)品不再支持flash。flash從此慢慢喪失移動端的市場和地位。

喬布斯支持html5

2012年，安卓宣布不再支持Flash，從此flash徹底失去了移動端市場和地位。

2012年html5標(biāo)準(zhǔn)確立，html5在逐漸制霸移動端的地位時，也直接沖擊了flash僅剩的桌面市場，flash桌面市場的份額在逐步下降。

各大瀏覽器逐步默認(rèn)禁用Flash，現(xiàn)2019年幾乎都全部禁用。

默認(rèn)禁用Flash

Adobe將在2020年停止開發(fā)和更新flash。

2020年停止開發(fā)和更新flash

flash興起衰敗皆因自己

Flash以第三方插件的身份，做著平臺該做的事情，但沒有推動行業(yè)標(biāo)準(zhǔn)統(tǒng)一化，反而企圖私立標(biāo)準(zhǔn)。

隨著功能的增多，能解碼編碼H.264，能進(jìn)行3D渲染，能播放7.1聲道環(huán)繞聲等，功能集于一身變得臃腫，效率變得低下。

Flash非常不安全。Flash能夠運行相當(dāng)復(fù)雜的代碼，這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心，這令Flash安全問題頻發(fā)。

Flash很不穩(wěn)定。作為一個插件，它自身頻頻崩潰也就罷了，還經(jīng)常拉著瀏覽器乃至操作系統(tǒng)一起殉情。

Flash加劇了手機(jī)的耗電量。

html5媒體新標(biāo)準(zhǔn)--Video標(biāo)簽

作用是在 HTML 頁面中嵌入視頻元素。Video定義視頻，比如電影片段或其他視頻流。

視頻播放

Video標(biāo)簽的屬性

src 視頻的播放源
controls 瀏覽器自帶的控制條
width 視頻寬度
height 視頻高度
poster 視頻封面
autoplay 自動播放
preload 預(yù)加載

有四個是必須的屬性：src、controls、width、height屬性。

視頻播放代碼

source標(biāo)簽

<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

<source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個可識別的格式。

src 視頻的播放源
Type 視頻格式 MP4, WebM, 和 Ogg

支持多格式的視頻

總結(jié)

video標(biāo)簽體系

視頻采集和管理是多模態(tài)大數(shù)據(jù)應(yīng)用場景必不可少的環(huán)節(jié)，在基于Vue2前端框架實現(xiàn)的Web界面如何進(jìn)行視頻的展示和播放是開發(fā)人員會遇到的一個主要技術(shù)問題。本文提供基于Vue2+video.js實現(xiàn)視頻的預(yù)覽的方案。

采集的視頻數(shù)據(jù)在前端視頻管理模塊列表中展示，然后用彈窗查看視頻詳情并預(yù)覽播放。最開始使用 vue-mini-player 組件，可輕松實現(xiàn)視頻在編輯界面的彈窗中播放，但是遇到兩個問題：1）彈窗中播放著視頻，關(guān)閉窗口后，視頻流不會停止。2）關(guān)閉窗口，重新打開新的視頻編輯窗口后，依舊是繼續(xù)播放之前的視頻。其原因應(yīng)該是關(guān)閉舊的窗口后，視頻播放的控件沒有銷毀，導(dǎo)致新打開的控件其實還是舊控件的實例。查了很多關(guān)于vue-mini-player的文檔和使用樣例，沒有找到如何銷毀vue-mini-player控件。

視頻列表

單條視頻數(shù)據(jù)編輯界面

video.js 是一個通用的可嵌入網(wǎng)頁的視頻播放器JS庫，在Vue2中引用video.js可以創(chuàng)建播放組件對象，關(guān)閉視頻時能進(jìn)行操作。基于Vue2使用video.js方法如下。

安裝video.js：

npm install video.js@6.13.0

main.js注冊

import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注冊

vue代碼文件中使用組件

創(chuàng)建<video>組件，可放在彈窗中任何需要的地方。重點是給出id值，設(shè)置屬性時需要用到。

<template>
  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
          <source :src="playUrl" type="video/mp4">
      </video>
      ...
      <div slot="footer" class="dialog-footer">
        	<el-button type="primary" @click="submitForm">確 定</el-button>
        	<el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>

export default {
data() {
    return {
    // 使用video.js播放視頻配置
    videoJsPlayer: null,
    playUrl:"", 			//視頻文件鏈接
    videoPlayerOption: {
        controls: true, 			//確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
        // url: "", 							//要嵌入的視頻資源url（不起作用？）
        poster: '',   					//封面
         autoplay: false, 	//自動播放屬性, true/false/"muted"(靜音播放)
        muted: false, 				//靜音播放
        preload: 'none', 		//建議瀏覽器是否應(yīng)在<video>加載元素后立即開始下載視頻數(shù)據(jù)。
        fluid: false, 					//是否自適應(yīng)布局,播放器將會有流體體積。換句話說，它將縮放以適應(yīng)容器。
        width: "850px", 		//視頻播放器的顯示寬度（以像素為單位）（fluid=false時起作用）
        height: "600px", 		//視頻播放器的顯示高度（以像素為單位）（fluid=false時起作用）
     },
};

methods: {
   // 視頻列表的“修改”按鈕，點擊后顯示修改彈窗
   handleUpdate(row) {
        // 從后臺獲取視頻信息
        getVedio(row.id).then(response => {
            this.form = response.data;    //修改彈窗其他字段信息賦值
            this.title = "修改視頻管理";
            this.open = true;    								// 顯示修改彈窗

            // video.js組件播放視頻
            this.videoPlayerOption.poster = response.data.avator;
            this.playUrl = response.data.contentsOrg;
            this.showVideoWindow();   //設(shè)置視頻播放控件
        });
     },
       
    //（重點是這里）
    // 使用video.js組件播放視頻
     showVideoWindow(){
        // 如果視頻播放控件已經(jīng)存在，切換視頻url，重新播放；如果控件不存在，創(chuàng)建
        if(this.videoJsPlayer){
            this.videoJsPlayer.src([
                 {
                    src: this.playUrl,
                    type: "video/mp4"
                 }
             ]);
            // 如何圖片不為空，設(shè)置視頻封面
            if(this.videoPlayerOption.poster != null && this.videoPlayerOption.poster != ""){
            		this.videoJsPlayer.poster(this.videoPlayerOption.poster);
             }
            this.videoJsPlayer.load(this.playUrl);
            // this.videoJsPlayer.play();      //自動播放（打開后，切換視頻后需自動播放）
         }else{
            // 最開始創(chuàng)建一次視頻播放組件
            this.$nextTick(() => {
                this.videoJsPlayer = this.videoJs(
                    "casvideoplayer", 				//播放器控件id
                    this.videoPlayerOption //播放器設(shè)置項（這里設(shè)置的poster屬性不生效，需要在后面單獨設(shè)置）
                 );
                this.videoJsPlayer.poster(this.videoPlayerOption.poster);  //貌似不生效？
             })
         }
     },
       
    // 編輯彈窗頁面的“取消”按鈕
    cancel() {
        // 重置視頻控件數(shù)據(jù)（video.js組件）
        if(this.videoJsPlayer){
            this.videoJsPlayer.reset();
         }
					this.reset();
 		},
｝

以上代碼實現(xiàn)了在Vue2彈窗中播放視頻組件的功能，注意關(guān)閉彈窗時要使用“取消”按鈕。如果通過點擊彈窗右上角X關(guān)閉彈窗，視頻還可以在后臺繼續(xù)播放，但是打開一個新的視頻修改彈窗后，播放的視頻會終止，并切換到新視頻播放界面。即使這樣，目前的功能已經(jīng)不影響用戶正常使用。

video.js還有一個強(qiáng)大功能，看到喜歡的畫面點擊右鍵可以保存視頻幀，另外支持畫中畫、設(shè)備投放等功能。

video.js右鍵功能

后續(xù)優(yōu)化改進(jìn)工作包括：1）把video.js視頻播放功能做成Vue組件，方便在不同的Vue代碼文件中調(diào)用。2）捕獲窗口關(guān)閉的事件（如點擊X關(guān)閉，或者鼠標(biāo)失焦點后關(guān)閉），關(guān)閉視頻流。

video.js

Vue

【參考材料】

video.js官方網(wǎng)站：https://videojs.com/

其他編碼材料：

https://blog.csdn.net/qq_60533482/article/details/128015308

https://blog.csdn.net/Uookic/article/details/116131535

https://www.cnblogs.com/DL-CODER/p/16833222.html

用說明：把代碼中的視頻路徑換成與自己的相對路徑或絕對路徑，播放器的窗口大小，根據(jù)需要修改高和寬的參數(shù)。

1.avi格式

復(fù)制代碼

代碼如下:

</embed>

</object>

2.mpg格式

復(fù)制代碼

代碼如下:

</object>

3.rm格式

復(fù)制代碼

代碼如下:

4.wmv格式

復(fù)制代碼

代碼如下:

</object>

5:最簡單的播放代碼

復(fù)制代碼

代碼如下:

6:有圖像的rm格式

復(fù)制代碼

代碼如下:

</OBJECT>

7:無圖像的rm格式：(如相聲，歌曲...)

復(fù)制代碼

代碼如下:

</object>

8:最簡單的media格式的播放器

復(fù)制代碼

代碼如下:

9:有圖像的media播放器，自動調(diào)用網(wǎng)上的插件

復(fù)制代碼

代碼如下:

10:無圖像的media播放器

復(fù)制代碼

代碼如下:

</object>

11:在線播放rm格式視頻代碼

復(fù)制代碼

代碼如下:

</object><br>

</object>

媒體播放器的外觀界面

在網(wǎng)頁中，你可以通過相關(guān)屬性來控制媒體播放器的哪些部分出現(xiàn)，哪些部分不出現(xiàn)。

媒體播放器包括如下元素：

VideoDisplayPanel：視頻顯示面板；

VideoBorder：視頻邊框；

ClosedCaptioningDisplayPanel；字幕顯示面板；

TrackBar；搜索欄；

ControlBarwithAudioandPositionControls：帶有聲音和位置控制的控制欄；

GoToBar：轉(zhuǎn)到欄；

DisplayPanel：顯示面板；

StatusBar：狀態(tài)欄；

下面的屬性用來決定顯示哪一個元素：

ShowControls屬性：是否顯示控制欄（包括播放控件及可選的聲音和位置控件）；

ShowAudioControls屬性：是否在控制欄顯示聲音控件（靜音按鈕和音量滑塊）；

ShowPositionControls屬性：是否在控制欄顯示位置控件（包括向后跳進(jìn)、快退、快進(jìn)、向前跳進(jìn)、預(yù)覽播放列表中的每個剪輯）；

ShowTracker屬性：是否顯示搜索欄；

ShowDisplay屬性：是否顯示顯示面板（用來提供節(jié)目與剪輯的信息）；

ShowCaptioning屬性：是否顯示字幕顯示面板；

ShowGotoBar屬性：是否顯示轉(zhuǎn)到欄；

ShowStatusBar屬性：是否顯示狀態(tài)欄；

播放列表

媒體播放器提供下面的方法來訪問播放列表中的剪輯：

Next方法，跳到節(jié)目（播放列表）中的下一個剪輯；

Previous方法，跳回到節(jié)目中的上一個剪輯；

媒體播放器的一個特性是能夠預(yù)覽節(jié)目中的每一個剪輯，使用如下屬性：

PreviewMode屬性，決定媒體播放器當(dāng)前是否處于預(yù)覽模式；

CanPreview屬性，決定媒體播放器能否處于預(yù)覽模式；

在windows媒體元文件中，可以為每一個剪輯指定預(yù)覽時間——PREVIEWDURATION,如果沒有指定，那么默認(rèn)的預(yù)覽時間是10秒鐘。

你也可以用Windows媒體元文件來添加watermarks與banners，元文件也支持插入廣告時的無間隙流切換。

節(jié)目信息

使用GetMediaInfoString方法可以返回相關(guān)剪輯或節(jié)目的如下信息：

文件名：Filename

標(biāo)題：Title

描述：Description

作者：Author

版權(quán)：Copyright

級別：Rating

URLs：logoicon、watermark、banner的地址

剪輯信息可以放在媒體文件中，也可以放在Windows媒體元文件中，或者兩者都放。如果在元文件中指定了剪輯信息，那么用GetMediaInfoString方法返回的就是元文件中的信息，而不會返回剪輯中包含的信息。

在元文件中，附加信息可以放置在每一個剪輯或節(jié)目的PARAM標(biāo)簽中。你可以為每個剪輯添加任意多個PARAM標(biāo)簽，用來存儲自定義的信息或鏈接到相關(guān)站點。在PARAM標(biāo)簽中的信息可以通過GetMediaParameter方法來訪問。

下面的屬性返回有關(guān)大小和時間的信息：

ImageSourceHeight、ImageSourceWidth：返回圖像窗口的顯示尺寸；

Duration屬性，返回剪輯的長度(秒)，要檢測這個屬性是否包含有效的數(shù)值，請檢查IsDurationValid屬性。(對于廣播的視頻，其長度是不可預(yù)知的)。

字幕

你可以用.smi文件來為你的節(jié)目添加字幕。媒體播放器支持下面的屬性來處理字幕：

SAMIFileName屬性，指定.smi文件的名字；

SAMILang屬性，指定字幕的語言(如果沒有指定則使用第一種語言)；

SAMIStyle屬性，指定字幕的文字大小和樣式；

ShowCaptioning屬性，決定是否顯示字幕顯示面板；

腳本命令

伴隨音頻、視頻流，你可以在流媒體文件中加入腳本命令。腳本命令是多媒體流中與特定時間同步的多對Unicode串。第一個串標(biāo)識待發(fā)命令的類型，第二個串指定要執(zhí)行的命令。

當(dāng)流播放到與腳本相關(guān)的時間時，控件會向網(wǎng)頁發(fā)送一個ScriptCommand事件，然后由事件處理進(jìn)程來響應(yīng)這個事件。腳本命令字符串會作為腳本命令事件的參數(shù)傳遞給事件處理器。

媒體播放器會自動處理下面類型的內(nèi)嵌腳本命令：

1)URL型命令：當(dāng)媒體播放器控件收到一個URL型的命令時，指定的URL會被裝載到用戶的默認(rèn)瀏覽器。如果媒體播放器嵌在一個分幀的HTML文件中，URL頁可以裝載到由腳本命令指定的幀內(nèi)。如果腳本命令沒有指定一個幀，將由DefaultFrame屬性決定將URL頁裝入哪一幀。

你可以通過設(shè)置InvokeURLs屬性來決定是否自動處理URL型的腳本命令。如果這個屬性的值為false，媒體播放器控件將忽視URL型命令。但是腳本命令事件仍會觸發(fā)，這就允許你有選擇地處理URL型命令。

URL型命令指定的是URL的相對地址?；刂肥怯葿aseURL屬性指定的。媒體播放器控件傳送的腳本命令事件的命令參數(shù)是鏈接好的地址。

2)FILENAME型命令：當(dāng)媒體播放器控件收到一個FILENAME型的命令時，它將FileName屬性設(shè)置為腳本命令提供的文件，之后媒體播放器會打開這個文件開始播放。媒體播放器控件總是自動處理FILENAME型命令，不象URL型命令，它們不能被禁止。

3)TEXT型命令：當(dāng)媒體播放器控件收到一個TEXT型的命令時，它會將命令的內(nèi)容顯示在控件的字幕窗口。內(nèi)容可以是純文本的，也可以是HTML。

4)EVENT型命令：當(dāng)媒體播放器控件收到一個EVENT型的命令時，它會在媒體元文件中搜索EVENT元素的NAME屬性。如果NAME屬性與腳本命令中的第二個字符串匹配，媒體播放器控件就執(zhí)行包含在EVENT元素中的條目。

5)OPENEVENT型命令：當(dāng)媒體播放器控件收到一個OPENEVENT型的命令時，它會在媒體元文件中檢查EVENT元素，并打開匹配的標(biāo)題，但不播放，直到收到來自EVENT型命令的同名真實事件。

捕捉鍵盤和鼠標(biāo)事件

EnableContextMenu與ClickToPlay屬性為用戶提供了在圖像窗口進(jìn)行操作的方法。

如果EnableContextMenu屬性為true，在圖像窗口右擊鼠標(biāo)可以打開關(guān)聯(lián)菜單，如果將ClickToPlay屬性設(shè)為true，用戶可以單擊圖像窗口進(jìn)行播放與暫停的切換。

要接收鼠標(biāo)移動和單擊事件，請將SendMouseMoveEvents和SendMouseClickEvents屬性設(shè)為true。鼠標(biāo)事件有：

MouseDown，當(dāng)用戶按下鼠標(biāo)時產(chǎn)生；

MouseUp，當(dāng)用戶釋放鼠標(biāo)時產(chǎn)生；

MouseMove，當(dāng)用戶移動鼠標(biāo)時產(chǎn)生；

Click，當(dāng)用戶在媒體播放器上單擊鼠標(biāo)按鈕時產(chǎn)生；

DbClick，當(dāng)用戶在媒體播放器上雙擊鼠標(biāo)按鈕時產(chǎn)生；

要接收鍵盤事件，請將SendKeyboardEvents屬性設(shè)為true。鍵盤事件有：

KeyDown，當(dāng)用戶按下一個鍵時產(chǎn)生；

KeyUp，當(dāng)用戶釋放一個鍵時產(chǎn)生；

KeyPress，當(dāng)用戶按下并釋放一個鍵時產(chǎn)生；

監(jiān)測流狀態(tài)與網(wǎng)絡(luò)鏈接

流狀態(tài)屬性包括：

PlayState：播放狀態(tài)；

OpenState：打開狀態(tài)；

Bandwidth：帶寬；

支持的事件有：

OpenStateChange：打開狀態(tài)改變(僅當(dāng)SendOpenStateChangeEvents屬性為true時觸發(fā))

PlayStateChange：播放狀態(tài)改變(僅當(dāng)SendPlayStateChangeEvents屬性為true時觸發(fā))

EndOfStream：流結(jié)束時觸發(fā)；

NewStream：打開新流時觸發(fā)；

網(wǎng)絡(luò)接收屬性包括：

ReceptionQuality：接收質(zhì)量；

ReceivedPackets：已經(jīng)收到的包；

LostPackets：丟失的包；

監(jiān)測緩沖的屬性有：

BufferingTime：緩沖時間；

BufferingCount：緩沖次數(shù)；

BufferingProgress：緩沖進(jìn)程；

Buffering：緩沖事件；

錯誤處理

媒體播放器提供了內(nèi)建的錯誤處理功能——在對話框或狀態(tài)欄顯示錯誤信息。另外，你可以自己添加錯誤處理程序。如果SendErrorEvents屬性設(shè)置為true，將不會顯示錯誤框，而是發(fā)送錯誤事件；如果SendErrorEvents屬性設(shè)置為false，將顯示錯誤框，而是發(fā)送錯誤事件。

媒體播放器支持下面的錯誤處理事件：

Error事件，指有危險性錯誤發(fā)生；

Warning事件，指發(fā)生了非危險性的錯誤；

當(dāng)你的應(yīng)用程序接收到一個錯誤事件，你可以檢測下面的屬性來確定具體的錯誤信息：

HasError：檢測目前的媒體播放器是否有錯誤；

ErrorCode：提供與該類型錯誤相關(guān)的代碼值；

ErrorDescription：提供錯誤的描述信息；

ErrorCorrection：指定媒體播放器對該類型的錯誤進(jìn)行校正；

播放CD

媒體播放器將CD看作（在每個音軌的開頭具有標(biāo)記的）單一音頻流。要在網(wǎng)頁中使用CD，你需要將FileName屬性設(shè)為CDAUDI，必須帶有冒號，如下所示：

復(fù)制代碼

代碼如下:

<HTML>

<HEAD><TITLE>CDAudioPlaybackExample</TITLE></HEAD>

<BODY>

<OBJECTID="MediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

WIDTH="320"

HEIGHT="508"

STYLE="position:absolute;left:0px;top:70px;">

<PARAMNAME="FileName"VALUE="cdaudi">

<PARAMNAME="AutoStart"VALUE="0">

<PARAMNAME="ShowControls"VALUE="1">

<PARAMNAME="ShowStatusBar"VALUE="1">

<PARAMNAME="ShowDisplay"VALUE="1">

</OBJECT>

</BODY>

</HTML>

之后你可以用Play方法播放CD了。

你可以在windows媒體元文件中指定播放順序以及每個音軌的信息。示例如下：

<ASXVERSION="3.0">

<TITLE>CDAudiowiththeMediaPlayer</TITLE>

<AUTHOR>WindowsMediaTechnologies</AUTHOR>

<ENTRY>

<TITLE>Track1:Title1</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="1"/>

<ENDMARKERNUMBER="2"/>

</ENTRY>

<ENTRY>

<TITLE>Track2:Title2</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="2"/>

<ENDMARKERNUMBER="3"/>

</ENTRY>

<ENTRY>

<TITLE>Track3:Title3</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="3"/>

<ENDMARKERNUMBER="4"/>

</ENTRY>

<ENTRY>

<TITLE>Track4:Title4</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="4"/>

</ENTRY>

</ASX>

在線咨詢

上一篇：從你在瀏覽器輸入url到發(fā)起http請求，這過程到底發(fā)生了什么？
下一篇：怎么用html5新增元素制作用戶注冊頁面？這個示例告訴你！

您的項目需求

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

整合營銷服務(wù)商

HTML基礎(chǔ)篇-17HTML之視頻播放

flash崛起--網(wǎng)頁標(biāo)準(zhǔn)的恥辱

flash衰敗--HTML5崛起并全面普及

flash興起衰敗皆因自己

html5媒體新標(biāo)準(zhǔn)--Video標(biāo)簽

Video標(biāo)簽的屬性

source標(biāo)簽

總結(jié)

您的項目需求