h5格式視頻播放
『壹』 項目中 有一個在H5頁面中播放dav格式視頻的功能 請問有什麼視頻插件可以實現嗎
flashplay插件一般能播放大多數的 視頻文件, 不過單一般是監控使用的格式不怎麼好兼容而且容量太大了 ,建議最好轉換成MP4格式以後在放在H5頁面上。
『貳』 html5可以播放哪些格式的視頻
HTML5支持的視頻格式在HTML5中嵌入的視頻格式主要包括ogg、mpeg4、wehm等。
具體介紹如下:
ogg:一種開源的視頻封裝容器,其視頻文件擴展名為ogg,裡面可以封裝vobris音頻編碼或者theora視頻編碼,同時ogg文件也能將音頻編碼和視頻編碼進行混合封裝。
mpeg4:目前最流行的視頻格式,其視頻文件擴展名為mp4。
同等條件下,mpeg4格式的視頻質量較好,但它的專利被MPEG-LA公司控制,任何支持播放mpeg4視頻的設備,都必須有一張MPEG-LA頒發的許可證。
(2)h5格式視頻播放擴展閱讀:
1、視頻格式是視頻播放軟體為了能夠播放視頻文件而賦予視頻文件的一種識別符號。
2、3GP是一種3G流媒體的視頻編碼格式,主要是為了配合3G網路的高傳輸速度而開發的,也是目前手機中最為常見的一種視頻格式。
3、MPEG(運動圖像專家組)是Motion Picture Experts Group 的縮寫,這類格式包括了MPEG-1,MPEG-2和MPEG-4在內的多種視頻格式。
4、AVI,音頻視頻交錯(Audio Video Interleaved)的英文縮寫,AVI這個由微軟公司發布的視頻格式,在視頻領域可以說是最悠久的格式之一。
5、一種獨立於編碼方式的在Internet上實時傳播多媒體的技術標准,Microsoft公司希望用其取代QuickTime之類的技術標准以及WAV、AVI之類的文件擴展名。
『叄』 html5的視頻支持格式
HTML5和瀏覽器對視頻和音頻文件格式都有嚴格的要求,僅有少數幾種視頻和音頻格式的文件能夠同時滿足HML5和瀏覽器的需求。
因此想要在網頁中嵌入視頻和音頻文件,首先要選擇正確的視頻和音頻文件格式。下面將對HTML5中視頻和音頻的一些常見格式以及瀏覽器的支持情況做具體介紹。
1、HTML5支持的視頻格式在HTML5中嵌入的視頻格式主要包括ogg、mpeg4、wehm等,具體介紹如下。
ogg:一種開源的視頻封裝容器,其視頻文件擴展名為ogg,裡面可以封裝vobris音頻編碼或者theora視頻編碼,同時ogg文件也能將音頻編碼和視頻編碼進行混合封裝。
mpeg4:目前最流行的視頻格式,其視頻文件擴展名為mp4。
同等條件下,mpeg4格式的視頻質量較好,但它的專利被MPEG-LA公司控制,任何支持播放mpeg4視頻的設備,都必須有一張MPEG-LA頒發的許可證。
目前MPEG-LA規定,只要是互聯網上免費播放的視頻,均可以無償獲得使用許可證。Webm:由Google發布的一個開放、免費的媒體文件格式,其視頻文件擴展名為webm。
由於webm格式的視頻質量和mpeg4較為接近,並且沒有專利限制等問題,webm已經被越來越多的人所使用。推薦了解傳智播客web前端培訓6.5版本課程。
(3)h5格式視頻播放擴展閱讀:
html5的智能表單:
表單是實現用戶與頁面後台交互主要組成部分,HTML5在表單的設計上功能更加強大。
input類型和屬性的多樣性大大地增強了HTML可表達的表單形式,再加上新增加的一些表單標簽,使得原本需要JavaScript來實現的控制項,可以直接使用HTML5的表單來實現。
一些如內容提示、焦點處理、數據驗證等功能,也可以通過HTML5的智能表單屬性標簽來完成。
『肆』 如何使用html5播放視頻
1、<video src="hangge.mp4" controls></video>1
2,通過width和height設置視頻窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>1
3,預載入媒體文件
設置preload不同的屬性值,可以告訴瀏覽器應該怎樣載入一個媒體文件:
(1)值為auto:讓瀏覽器自動下載整個文件
(2)值為none:讓瀏覽器不必預先下載文件
(3)值為metadata:讓瀏覽器先獲取視頻文件開頭的數據塊,從而足以確定一些基本信息(比如視頻的總時長,第一幀圖像等)
<!-- 用戶點擊播放才開始下載 --><video src="hangge.mp4" controls preload="none"></video>12
4,自動播放
(1)使用autoplay屬性可以讓瀏覽器載入完視頻文件後立即播放。
<video src="hangge.mp4" controls autoplay></video>1
(2)如果啟用自動播放,可以將播放器設置為muted狀態。這樣自動播放時會靜音,防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。
<video src="hangge.mp4" controls autoplay muted></video>1
5,循環播放
使用loop屬性讓視頻播放結束時,再從頭開始播放。
<video src="hangge.mp4" controls loop></video>1
6,設置替換視頻的圖片(封面圖片)
通過poster屬性可以設置,瀏覽器在下面三種情況下會使用這個圖片:
(1)視頻第一幀未載入完畢
(2)把preload屬性設置為none
(3)沒有找到指定的視頻文件
<video src="hangge.mp4" controls poster="hangge.png"></video>1
7,瀏覽器兼容,如何讓每一個瀏覽器都能順利播放視頻
現在大部分瀏覽器都能支持H.264格式的視頻,但Opera瀏覽器卻一直不支持。我們需要通過後備措施保證每個人都能看到視頻,通常有下面幾種方案:
(1)使用多種視頻格式
<video>和<audio>元素有個內置的格式後備系統。我們不使用src屬性,而是在其內部嵌套一組<source>元素,瀏覽器會選擇播放第一個它所支持的文件。
我們可以添加WebM格式的視頻提供對Opera的支持。
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>1234
(2)添加Flash後備措施(推薦)
上面那個方法不推薦,應為Opera瀏覽器只佔不到1%的份額。特意為它把視頻都轉碼一邊太費事。使用Flash作為備用播放方案還是很方便的,同時Flash還能兼容IE8這種連<video>元素都不支持的老瀏覽器。
這里使用Flowplayer Flash作為備用播放器(本地下載 :flowplayer-3.2.18.zip)
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
<object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
</object>
</video>1234567891011
(3)也有人優先使用Flash,而HTML5作為後備措施。
這么做是因為Flash普及率比較高,而HTML5作為後備可以擴展iPad和iPhone用戶
<object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>
</object>
『伍』 html5 的視頻播放器 能支持 mpg格式嗎 幫忙
html5的視頻格式到現在仍未統一,所以各瀏覽器的支持情況不一樣。
理論上mp4 webm ogv mpg等都支持,但各瀏覽器回有差異。
(貌似還沒答有支持mpg,要轉格式)
你可以准備多個相同內容、格式不同的視頻,
瀏覽器會找到他能播放的那個來播放,官方標準是.ogg視頻;
<video width="320" height="240" controls="controls">
<source src="a.ogg" type="video/ogg">
<source src="a.mp4" type="video/mp4">
your browser does not support the video tag.
</video>
『陸』 HTML5里video標簽支持哪些格式的視頻文件
一共支持來三種格式:
ogg、mpeg4、webm。但這三源種格式對於瀏覽器的兼容性卻各不同。注釋:internet
explorer
8
以及更早的版本不支持
標簽。格式
ie
firefox
opera
chrome
safari
ogg
no
3.5+
10.5+
5.0+
no
mpeg4
9.0+
no
no
5.0+
3.0+
webm
no
4.0+
10.6+
6.0+
no
no:代表不支持這款瀏覽器。
x.0+:表示支持這款及版本更高的瀏覽器。
『柒』 HTML如何播放rmvb格式的視頻要可以播放的代碼。。。。
程序代碼
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="500"
height="400"><param name="autostart" value="0" /><param name="url"
value="視頻地址.wmv" /><embed src="視頻地址.wmv" autostart="0" type="video/x-ms-wmv"
width="500" height="400"></embed></object>
其他的看參數自己修改吧
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="/Mbar.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1"
autostart="1" autorewind="0" playcount="0" moviewindowheight="240"
moviewindowwidth="320" filename="/Mbar.avi" src="視頻文件">
</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="視頻文件" 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>
4.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="視頻文件">
<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>
5.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">
<param name="AutoRewind" value=1>
<param name="FileName" value="視頻文件">
<param name=InvokeURLs value=-1>
<param name=Language value=-1>
<param name=Mute value=0>
<param name=PlayCount value=1>
<param name=PreviewMode value=0>
<param name=Rate value=1>
<param name=SAMILang value="">
<param name=SAMIStyle value="">
<param name=SAMIFileName value="">
<param name=SelectionStart value=0>
<param name=SelectionEnd value=true>
<param name=SendOpenStateChangeEvents value=-1>
<param name=SendWarningEvents value=-1>
<param name=SendErrorEvents value=-1>
<param name=SendKeyboardEvents value=0>
<param name=SendMouseClickEvents value=0>
<param name=SendMouseMoveEvents value=0>
<param name=SendPlayStateChangeEvents value=-1>
<param name=ShowCaptioning value=0>
<param name=ShowControls value=1>
<param name=ShowAudioControls value=1>
<param name=ShowDisplay value=1>
<param name=ShowGotoBar value=1>
<param name=ShowPositionControls value=1>
<param name=ShowStatusBar value=1>
<param name=ShowTracker value=1>
<param name=TransparentAtStart value=0>
<param name=VideoBorderWidth value=0>
<param name=VideoBorderColor value=0>
<param name=VideoBorder3D value=0>
<param name=Volume value=-1070>
<param name=WindowlessVideo value=1>
</object>
網頁播放器的參數含義 Windows Media Player 網頁播放器 參數含義
(默認0為否,-1或1為是)
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1"
width="286" height="225">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="-1">
<!--是否自動調整播放大小-->
<param name="AutoStart" value="-1">
<!--是否自動播放-->
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<!--左右聲道平衡,最左-9640,最右9640-->
<param name="BaseURL" value>
<param name="BufferingTime" value="15">
<!--緩沖時間-->
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="0">
<!--當前播放進度 -1 表示不變,0表示開頭單位是秒,比如10表示從第10秒處開始播放,值必須是-1.0或大於等於0-->
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<!--視頻1-50%, 0-100%, 2-200%,3-全屏其它的值作0處理,小數則採用四捨五入然後按前的處理-->
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<!-是否用右鍵彈出菜單控制-->
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<!--是否允許拉動播放進度條到任意地方播放-->
<param name="Filename" value="視頻文件" valuetype="ref">
<!--播放的文件地址-->
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<!--是否靜音-->
<param name="PlayCount" value="10">
<!--重復播放次數,0為始終重復-->
<param name="PreviewMode" value="-1">
<param name="Rate" value="1">
<!--播放速率控制,1為正常,允許小數-->
<param name="SAMIStyle" value>
<!--SAMI樣式-->
<param name="SAMILang" value>
<!--SAMI語言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<!--是否顯示字幕,為一塊黑色,下面會有一大塊黑色,一般不顯示-->
<param name="ShowControls" value="-1">
<!--是否顯示控制,比如播放,停止,暫停-->
<param name="ShowAudioControls" value="-1">
<!--是否顯示音量控制-->
<param name="ShowDisplay" value="0">
<!--顯示節目信息,比如版權等-->
<param name="ShowGotoBar" value="0">
<!--是否啟用上下文菜單-->
<param name="ShowPositionControls" value="-1">
<!--是否顯示往前往後及列表,如果顯示一般也都是灰色不可控制-->
<param name="ShowStatusBar" value="-1">
<!--當前播放信息,顯示是否正在播放,及總播放時間和當前播放到的時間-->
<param name="ShowTracker" value="-1">
<!--是否顯示當前播放跟蹤條,即當前的播放進度條-->
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<!--顯示部的寬部,如果小於視頻寬,則最小為視頻寬,或者加大到指定值,並自動加大高度.此改變只改變四周的黑框大小,不改變視頻大小-->
<param name="VideoBorderColor" value="0">
<!--顯示黑色框的顏色, 為RGB值,比如ffff00為黃色-->
<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">
<!--音量大小,負值表示是當前音量的減值,值自動會取絕對值,最大為0,最小為-9640-->
<param name="WindowlessVideo" value="0">
<!--如果是0可以允許全屏,否則只能在窗口中查看-->
</object>
上面的這個播放器是老式的那種,6.4版本!新式播放器是在MediaPlayer9.0以後出現的,也就是說只有裝了9.0或9.0以上的播放器才能正常使
用的。
-------------------------------------------------------------------------------
下面是新式播放器代碼,相對以前的來說要簡單很多:
<object id="player" height="64" width="260"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1">
<!--是否自動播放-->
<param NAME="Balance" VALUE="0">
<!--調整左右聲道平衡,同上面舊播放器代碼-->
<param name="enabled" value="-1">
<!--播放器是否可人為控制-->
<param NAME="EnableContextMenu" VALUE="-1">
<!--是否啟用上下文菜單-->
<param NAME="url" value="/blog/1.wma">
<!--播放的文件地址-->
<param NAME="PlayCount" VALUE="1">
<!--播放次數控制,為整數-->
<param name="rate" value="1">
<!--播放速率控制,1為正常,允許小數,1.0-2.0-->
<param name="currentPosition" value="0">
<!--控制項設置:當前位置-->
<param name="currentMarker" value="0">
<!--控制項設置:當前標記-->
<param name="defaultFrame" value="">
<!--顯示默認框架-->
<param name="invokeURLs" value="0">
<!--腳本命令設置:是否調用URL-->
<param name="baseURL" value="">
<!--腳本命令設置:被調用的URL-->
<param name="stretchToFit" value="0">
<!--是否按比例伸展-->
<param name="volume" value="50">
<!--默認聲音大小0%-100%,50則為50%-->
<param name="mute" value="0">
<!--是否靜音-->
<param name="uiMode" value="mini">
<!--播放器顯示模式:Full顯示全部;mini最簡化;None不顯示播放控制,只顯示視頻窗口;invisible全部不顯示-->
<param name="windowlessVideo" value="0">
<!--如果是0可以允許全屏,否則只能在窗口中查看-->
<param name="fullScreen" value="0">
<!--開始播放是否自動全屏-->
<param name="enableErrorDialogs" value="-1">
<!--是否啟用錯誤提示報告-->
<param name="SAMIStyle" value>
<!--SAMI樣式-->
<param name="SAMILang" value>
<!--SAMI語言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
</object>
『捌』 有沒有支持MP4、AVI、 RMVB格式的h5視頻播放插件的
有的flash都是支持的,或者一個ck的播放器
『玖』 請問h5支持什麼格式的視頻
主流的一般都是一共支持三種格式: Ogg、MPEG4、WebM。但這三種格式對於瀏覽器的兼容性卻各不同。或者使用優酷之類的網站插入外鏈視頻也可以
『拾』 html5如何實現自動播放視頻
我們使用html5的video標簽,可以不依賴於任何第三方的插件或控制項,直接在瀏覽器內中實現視頻播容放功能。
註:html5的video標簽目前只支持播放.mp4、.ogg、.webm等幾種格式的視頻文件,暫不支持其他格式的視頻文件。此外,不同的html5瀏覽器支持的視頻文件格式也略有不同,這種狀況可能會在未來的html5中得以改善。