整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網頁在線視頻播放代碼大全

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

          1.avi格式

          復制代碼

          代碼如下:

          <object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">

          <param name="ShowDisplay" value="0">

          <param name="ShowControls" value="1">

          <param name="AutoStart" value="1">

          <param name="AutoRewind" value="0">

          <param name="PlayCount" value="0">

          <param name="Appearance value="0 value=""">

          <param name="BorderStyle value="0 value=""">

          <param name="MovieWindowHeight" value="240">

          <param name="MovieWindowWidth" value="320">

          <param name="FileName" value="http://www.jb51.net/sample.avi">

          <embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="http://www.jb51.net/sample.avi" src="sample.avi">

          </embed>

          </object>

          2.mpg格式

          復制代碼

          代碼如下:

          <object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">

          <param name="Appearance" value="0">

          <param name="AutoStart" value="-1">

          <param name="AllowChangeDisplayMode" value="-1">

          <param name="AllowHideDisplay" value="0">

          <param name="AllowHideControls" value="-1">

          <param name="AutoRewind" value="-1">

          <param name="Balance" value="0">

          <param name="CurrentPosition" value="0">

          <param name="DisplayBackColor" value="0">

          <param name="DisplayForeColor" value="16777215">

          <param name="DisplayMode" value="0">

          <param name="Enabled" value="-1">

          <param name="EnableContextMenu" value="-1">

          <param name="EnablePositionControls" value="-1">

          <param name="EnableSelectionControls" value="0">

          <param name="EnableTracker" value="-1">

          <param name="Filename" value="http://www.jb51.net/sample.mpg" valuetype="ref">

          <param name="FullScreenMode" value="0">

          <param name="MovieWindowSize" value="0">

          <param name="PlayCount" value="1">

          <param name="Rate" value="1">

          <param name="SelectionStart" value="-1">

          <param name="SelectionEnd" value="-1">

          <param name="ShowControls" value="-1">

          <param name="ShowDisplay" value="-1">

          <param name="ShowPositionControls" value="0">

          <param name="ShowTracker" value="-1">

          <param name="Volume" value="-480">

          </object>

          3.rm格式

          復制代碼

          代碼如下:

          <OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352> <param name="_ExtentX" value="9313">

          <param name="_ExtentY" value="7620">

          <param name="AUTOSTART" value="0">

          <param name="SHUFFLE" value="0">

          <param name="PREFETCH" value="0">

          <param name="NOLABELS" value="0">

          <param name="SRC" value="rtsp://203.207.131.35/vod/dawan-a.rm";>

          <param name="CONTROLS" value="ImageWindow">

          <param name="CONSOLE" value="Clip1">

          <param name="LOOP" value="0">

          <param name="NUMLOOP" value="0">

          <param name="CENTER" value="0">

          <param name="MAINTAINASPECT" value="0">

          <param name="BACKGROUNDCOLOR" value="#000000"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" AUTOSTART="false"> </OBJECT>

          4.wmv格式

          復制代碼

          代碼如下:

          <object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">

          <!-- ASX File Name -->

          <param name="AutoRewind" value=1>

          <param name="FileName" value="xxxxxx.wmv">

          <!-- Display Controls -->

          <param name="ShowControls" value="1">

          <!-- Display Position Controls -->

          <param name="ShowPositionControls" value="0">

          <!-- Display Audio Controls -->

          <param name="ShowAudioControls" value="1">

          <!-- Display Tracker Controls -->

          <param name="ShowTracker" value="0">

          <!-- Show Display -->

          <param name="ShowDisplay" value="0">

          <!-- Display Status Bar -->

          <param name="ShowStatusBar" value="0">

          <!-- Diplay Go To Bar -->

          <param name="ShowGotoBar" value="0">

          <!-- Display Controls -->

          <param name="ShowCaptioning" value="0">

          <!-- Player Autostart -->

          <param name="AutoStart" value=1>

          <!-- Animation at Start -->

          <param name="Volume" value="-2500">

          <param name="AnimationAtStart" value="0">

          <!-- Transparent at Start -->

          <param name="TransparentAtStart" value="0">

          <!-- Do not allow a change in display size -->

          <param name="AllowChangeDisplaySize" value="0">

          <!-- Do not allow scanning -->

          <param name="AllowScan" value="0">

          <!-- Do not show contect menu on right mouse click -->

          <param name="EnableContextMenu" value="0">

          <!-- Do not allow playback toggling on mouse click -->

          <param name="ClickToPlay" value="0">

          </object>

          5:最簡單的播放代碼

          復制代碼

          代碼如下:

          <embed src="http://www.jb51.net/sample.wmv" autostart="true" loop="true" width="200" height="150" >

          6:有圖像的rm格式

          復制代碼

          代碼如下:

          <OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height=288 id=video1 width=305 VIEWASTEXT>

          <param name=_ExtentX value=5503>

          <param name=_ExtentY value=1588>

          <param name=AUTOSTART value=-1>

          <param name=SHUFFLE value=0>

          <param name=PREFETCH value=0>

          <param name=NOLABELS value=0>

          <param name=SRC value=//www.jb51.net/sample.ram>

          <param name=CONTROLS value=Imagewindow,StatusBar,ControlPanel>

          <param name=CONSOLE value=RAPLAYER>

          <param name=LOOP value=0>

          <param name=NUMLOOP value=0>

          <param name=CENTER value=0>

          <param name=MAINTAINASPECT value=0>

          <param name=BACKGROUNDCOLOR value=#000000>

          </OBJECT>

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

          復制代碼

          代碼如下:

          <object ID=video2 WIDTH=300 HEIGHT=62 CLASSID=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA>

          <param name=_ExtentX value=9657>

          <param name=_ExtentY value=847>

          <param name=AUTOSTART value=-1>

          <param name=SHUFFLE value=0>

          <param name=PREFETCH value=0>

          <param name=NOLABELS value=0>

          <param name=SRC value=//www.jb51.net/sample.rm>

          <param name=CONTROLS value=StatusBar,controlpanel>

          <param name=CONSOLE value=Clip1>

          <param name=LOOP value=0>

          <param name=NUMLOOP value=0>

          <param name=CENTER value=0>

          <param name=MAINTAINASPECT value=0>

          <param name=BACKGROUNDCOLOR value=#000000>

          </object>

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

          復制代碼

          代碼如下:

          <embed src=mms://www.jb51.net/sample.wmv width=200 height=200 autostart=true loop=true></embed>

          9:有圖像的media播放器,自動調用網上的插件

          復制代碼

          代碼如下:

          <object id=nstv classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=280 height=265 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>

          <param name=URL value=//www.jb51.net/sample.wma>

          <PARAM NAME=UIMode value=full><PARAM NAME=AutoStart value=true>

          <PARAM NAME=Enabled value=true>

          <PARAM NAME=enableContextMenu value=false>

          <param name=WindowlessVideo value=true></object>

          10:無圖像的media播放器

          復制代碼

          代碼如下:

          <object id=nstv classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=280 height=60 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>

          <param name=URL value=//www.jb51.net/sample.wma>

          <PARAM NAME=UIMode value=full><PARAM NAME=AutoStart value=true>

          <PARAM NAME=Enabled value=true>

          <PARAM NAME=enableContextMenu value=false>

          </object>

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

          復制代碼

          代碼如下:

          <object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="400" height="272">

          <param name="_ExtentX" value="18415">

          <param name="_ExtentY" value="9102">

          <param name="AUTOSTART" value="-1">

          <param name="SHUFFLE" value="0">

          <param name="PREFETCH" value="0">

          <param name="NOLABELS" value="-1">

          <param name="SRC" value="http://www.jb51.net/sample.rm">

          <param name="CONTROLS" value="Imagewindow">

          <param name="CONSOLE" value="clip1">

          <param name="LOOP" value="0">

          <param name="NUMLOOP" value="0">

          <param name="CENTER" value="0">

          <param name="MAINTAINASPECT" value="0">

          <param name="BACKGROUNDCOLOR" value="#000000">

          </object><br>

          <object ID="RP2" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="400" HEIGHT="57">

          <param name="_ExtentX" value="18415">

          <param name="_ExtentY" value="1005">

          <param name="AUTOSTART" value="-1">

          <param name="SHUFFLE" value="0">

          <param name="PREFETCH" value="0">

          <param name="NOLABELS" value="-1">

          <param name="SRC" value="http://www.jb51.net/sample.rm">

          <PARAM NAME="CONTROLS" VALUE="ControlPanel,StatusBar">

          <param name="CONSOLE" value="clip1">

          <param name="LOOP" value="0">

          <param name="NUMLOOP" value="0">

          <param name="CENTER" value="0">

          <param name="MAINTAINASPECT" value="0">

          <param name="BACKGROUNDCOLOR" value="#000000">

          </object>

          媒體播放器的外觀界面

          在網頁中,你可以通過相關屬性來控制媒體播放器的哪些部分出現,哪些部分不出現。

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

          VideoDisplayPanel:視頻顯示面板;

          VideoBorder:視頻邊框;

          ClosedCaptioningDisplayPanel;字幕顯示面板;

          TrackBar;搜索欄;

          ControlBarwithAudioandPositionControls:帶有聲音和位置控制的控制欄;

          GoToBar:轉到欄;

          DisplayPanel:顯示面板;

          StatusBar:狀態欄;

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

          ShowControls屬性:是否顯示控制欄(包括播放控件及可選的聲音和位置控件);

          ShowAudioControls屬性:是否在控制欄顯示聲音控件(靜音按鈕和音量滑塊);

          ShowPositionControls屬性:是否在控制欄顯示位置控件(包括向后跳進、快退、快進、向前跳進、預覽播放列表中的每個剪輯);

          ShowTracker屬性:是否顯示搜索欄;

          ShowDisplay屬性:是否顯示顯示面板(用來提供節目與剪輯的信息);

          ShowCaptioning屬性:是否顯示字幕顯示面板;

          ShowGotoBar屬性:是否顯示轉到欄;

          ShowStatusBar屬性:是否顯示狀態欄;

          播放列表

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

          Next方法,跳到節目(播放列表)中的下一個剪輯;

          Previous方法,跳回到節目中的上一個剪輯;

          媒體播放器的一個特性是能夠預覽節目中的每一個剪輯,使用如下屬性:

          PreviewMode屬性,決定媒體播放器當前是否處于預覽模式;

          CanPreview屬性,決定媒體播放器能否處于預覽模式;

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

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

          節目信息

          使用GetMediaInfoString方法可以返回相關剪輯或節目的如下信息:

          文件名:Filename

          標題:Title

          描述:Description

          作者:Author

          版權:Copyright

          級別:Rating

          URLs:logoicon、watermark、banner的地址

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

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

          下面的屬性返回有關大小和時間的信息:

          ImageSourceHeight、ImageSourceWidth:返回圖像窗口的顯示尺寸;

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

          字幕

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

          SAMIFileName屬性,指定.smi文件的名字;

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

          SAMIStyle屬性,指定字幕的文字大小和樣式;

          ShowCaptioning屬性,決定是否顯示字幕顯示面板;

          腳本命令

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

          當流播放到與腳本相關的時間時,控件會向網頁發送一個ScriptCommand事件,然后由事件處理進程來響應這個事件。腳本命令字符串會作為腳本命令事件的參數傳遞給事件處理器。

          媒體播放器會自動處理下面類型的內嵌腳本命令:

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

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

          URL型命令指定的是URL的相對地址。基地址是由BaseURL屬性指定的。媒體播放器控件傳送的腳本命令事件的命令參數是鏈接好的地址。

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

          3)TEXT型命令:當媒體播放器控件收到一個TEXT型的命令時,它會將命令的內容顯示在控件的字幕窗口。內容可以是純文本的,也可以是HTML。

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

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

          捕捉鍵盤和鼠標事件

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

          如果EnableContextMenu屬性為true,在圖像窗口右擊鼠標可以打開關聯菜單,如果將ClickToPlay屬性設為true,用戶可以單擊圖像窗口進行播放與暫停的切換。

          要接收鼠標移動和單擊事件,請將SendMouseMoveEvents和SendMouseClickEvents屬性設為true。鼠標事件有:

          MouseDown,當用戶按下鼠標時產生;

          MouseUp,當用戶釋放鼠標時產生;

          MouseMove,當用戶移動鼠標時產生;

          Click,當用戶在媒體播放器上單擊鼠標按鈕時產生;

          DbClick,當用戶在媒體播放器上雙擊鼠標按鈕時產生;

          要接收鍵盤事件,請將SendKeyboardEvents屬性設為true。鍵盤事件有:

          KeyDown,當用戶按下一個鍵時產生;

          KeyUp,當用戶釋放一個鍵時產生;

          KeyPress,當用戶按下并釋放一個鍵時產生;

          監測流狀態與網絡鏈接

          流狀態屬性包括:

          PlayState:播放狀態;

          OpenState:打開狀態;

          Bandwidth:帶寬;

          支持的事件有:

          OpenStateChange:打開狀態改變(僅當SendOpenStateChangeEvents屬性為true時觸發)

          PlayStateChange:播放狀態改變(僅當SendPlayStateChangeEvents屬性為true時觸發)

          EndOfStream:流結束時觸發;

          NewStream:打開新流時觸發;

          網絡接收屬性包括:

          ReceptionQuality:接收質量;

          ReceivedPackets:已經收到的包;

          LostPackets:丟失的包;

          監測緩沖的屬性有:

          BufferingTime:緩沖時間;

          BufferingCount:緩沖次數;

          BufferingProgress:緩沖進程;

          Buffering:緩沖事件;

          錯誤處理

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

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

          Error事件,指有危險性錯誤發生;

          Warning事件,指發生了非危險性的錯誤;

          當你的應用程序接收到一個錯誤事件,你可以檢測下面的屬性來確定具體的錯誤信息:

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

          ErrorCode:提供與該類型錯誤相關的代碼值;

          ErrorDescription:提供錯誤的描述信息;

          ErrorCorrection:指定媒體播放器對該類型的錯誤進行校正;

          播放CD

          媒體播放器將CD看作(在每個音軌的開頭具有標記的)單一音頻流。要在網頁中使用CD,你需要將FileName屬性設為CDAUDI,必須帶有冒號,如下所示:

          復制代碼

          代碼如下:

          <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>

          <COPYRIGHT>(c)1999,Microsoft,Inc.</COPYRIGHT>

          <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>

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

          目標

          1. 了解Flash為何會被淘汰?
          2. 如何設置視頻播放?
          3. 視頻播放支持哪幾種視頻格式?

          flash崛起--網頁標準的恥辱

          flash是Adobe公司其中之一的產品。它發起于W3C與WHATWG的第五代web標準之爭,它撿了個大便宜,乘機定義網頁媒體標準。

          W3C與WHATWG的第五代web標準之爭

          flash填補了當時網頁只有文字和圖片的單調世界,將媒體(視頻、音頻、游戲)引入了網頁,將網頁帶進多彩的世界。

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

          火柴人

          Flash用第三方插件的身份,幾乎制霸了網頁媒體的標準,讓W3C尷尬不已,甚至從某種程度上說,讓真正的網頁標準推廣受阻。

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

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

          喬布斯支持html5

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

          2012年html5標準確立,html5在逐漸制霸移動端的地位時,也直接沖擊了flash僅剩的桌面市場,flash桌面市場的份額在逐步下降。

          各大瀏覽器逐步默認禁用Flash,現2019年幾乎都全部禁用。

          默認禁用Flash

          Adobe將在2020年停止開發和更新flash。

          2020年停止開發和更新flash

          flash興起衰敗皆因自己

          Flash以第三方插件的身份,做著平臺該做的事情,但沒有推動行業標準統一化,反而企圖私立標準。

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

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

          Flash很不穩定。作為一個插件,它自身頻頻崩潰也就罷了,還經常拉著瀏覽器乃至操作系統一起殉情。

          Flash加劇了手機的耗電量。

          html5媒體新標準--Video標簽

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

          視頻播放

          Video標簽的屬性

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

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

          視頻播放代碼

          source標簽

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

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

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

          支持多格式的視頻

          總結

          video標簽體系

          音頻是網頁承載內容很重要的一個元素,也是必不可少的網頁表現形式(圖、文、表、視、音)之一。缺少聲音的網站,就如同人不能說話一樣。曾經網頁要想播放音頻,必須得用第三方插件flash。隨著html5標準逐漸普及,如今幾乎所有的瀏覽器都使用html5來播放音頻。

          目標

          1. 如何設置音頻播放?
          2. 支持哪幾種音頻格式?

          音頻播放標簽--audio

          作用是在 HTML 頁面中嵌入音頻元素,來播放聲音文件或者音頻流。

          網頁版的音樂播放器

          audio標簽的屬性

          src 音頻的播放源(必須)

          controls 瀏覽器自帶的控制條(必須)

          autoplay 自動播放

          loop 循環播放

          preload 預加載

          音頻代碼

          每一種瀏覽器自帶的音頻播放控制器都不一樣,但功能都一樣。網上看到的播放器,大多數都是改過它的樣式。

          瀏覽器自帶的音頻控制條

          支持多個格式--source標簽

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

          如果不確定音頻格式是哪個格式,可以使用source標簽。<source> 元素可以鏈接不同格式的視頻文件,瀏覽器將使用第一個可識別的格式。

          支持多種格式

          總結

          audio總結


          主站蜘蛛池模板: 成人精品视频一区二区三区不卡 | 国产精品亚洲一区二区无码| 亚洲av永久无码一区二区三区| 狠狠色婷婷久久一区二区三区| 国产精品分类视频分类一区| 国产激情无码一区二区| 一区二区和激情视频| 人妻体体内射精一区二区| 国产日韩AV免费无码一区二区三区| 成人无码精品一区二区三区| 亚洲无删减国产精品一区| 国产成人精品一区二区秒拍| 三上悠亚一区二区观看| 在线观看午夜亚洲一区| 高清国产精品人妻一区二区| 中文字幕一区二区三区精华液 | 色妞AV永久一区二区国产AV| 免费在线视频一区| 国产成人久久一区二区不卡三区| 国产另类ts人妖一区二区三区| 国产一区二区三区小向美奈子| 精品视频一区二区三区四区| 国产成人精品第一区二区| 精品国产AV一区二区三区| 人妻体体内射精一区二区| 国产美女在线一区二区三区| 亚洲一区二区在线免费观看| 夜色福利一区二区三区| 亚洲福利秒拍一区二区| 亚洲宅男精品一区在线观看| 亚洲一区二区三区国产精华液| 久久精品免费一区二区喷潮| 国产精品美女一区二区| 日韩一区二区三区视频| 伊人激情AV一区二区三区| 色偷偷一区二区无码视频| 亚洲.国产.欧美一区二区三区| 日韩免费一区二区三区| 中文字幕一区二区三区在线不卡 | 日韩毛片基地一区二区三区| 亚洲.国产.欧美一区二区三区|