當前位置：首頁 » 網站代碼 » h5播放器代碼

h5播放器代碼

發布時間: 2021-03-24 07:19:23

㈠ javascript html5視頻播放器

款很棒的 HTML5 視頻播放器作為下一代的網頁語言，HTML5 擁有很多讓人期待已久的新特性，其中之一就是 video 標簽，讓開發者可以在網頁中和添加圖片一樣簡單的方式添加視頻。1、VideoJSVideoJS 是最流行的 HTML5 視頻播放器，免費、開源，可使用 CSS 輕松定製皮膚，支持全屏，在不支持的瀏覽器自動切換為 Flash 播放。2、SublimeVideoSublimeVideo 是一個獨特的基於雲概念的 HTML5 視頻播放器，功能強大，可惜不是免費的。3、Open Standard Media (OSM) Player由 Alethia Inc 開發，是集全功能於一體的網路播放器，非常不錯。4、Video for EverybodyVideo for Everybody 讓你在網頁中嵌入一小段代碼就能支持 HTML5 視頻，在不支持的瀏覽器中自動切換為 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 視頻解決方案 – 兼容所有主流瀏覽器，採用獨特的 fallback 機制。6、FlareVideoFlareVideo 由 Alex MacCaw 開發，他是一位Ruby/JS開發者，FlareVideo主要特色：在不支持 HTML5 視頻的情況，用Flash作為替代方案可輕松自定義主題支持全屏完全開源和免費用於商業用途7、Projekktor全文

㈡ HTML5和flash播放器各有什麼優缺點

第一，流暢度。FlashPlayer除了穩定性問題，支持跨平台（不包括Linux）、跨瀏覽器硬體解碼是比HTML5具有優勢。而HTML5最大的問題在於瀏覽器內建編碼不統一。

第二，穩定性。FlashPlayer最大的問題就是容易宕，各位在玩游戲、看影片時遇過FlashPlayer出問題的經驗。而HTML5利用標簽和JavaScript來播放影片，不需任何外掛就能達成，是相對穩定許多的。

第三，兼容性。HTML5的播放器不支持低版本瀏覽器。

㈢ html要實現視頻播放是不是一定要使用視頻播放插件

直接用video標簽不是不行，但是相對來講缺少很多功能，而且兼容性不好，舊版瀏覽器無法識別該標簽，故無法在舊版瀏覽器中播放視頻。即便不考慮舊版瀏覽器，能夠使用video標簽的現代瀏覽器之間也存在編碼格式不兼容的問題，而需要在伺服器上為同一個視頻文件分別存儲格式。
市面上大部分視頻插件都是以FLASH形式存在的，FLASH在所有瀏覽器上都能運行，因而不存在任何兼容問題，多年的技術沉澱也使得FLASH播放器技術越加成熟功能擴展越來越強大，所以一般都通過FLASH視頻插件播放。不過我相信隨著標準的制定越加完善VIDEO標簽在將來一定會代替FLASH播放器。

㈣ html5如何實現自動播放視頻

HTML5 是下一代的 HTML，提供了展示視頻的標准，規定了一種通過 video 元素來包含視頻的標准方法。

純H5頁面在手機端中是無法實現自動播放，移動端瀏覽器大部分是禁用video和audio的autoplay功能並且，很多移動瀏覽器也不支持首次js調用play方法進行播放（只有用戶手動點播放後暫停，然後用代碼進行play可以）。

這樣做主要是為了防止不必要的自動播放浪費流量。

以下代碼是實現用戶第一次觸摸後實現的播放和微信app下自動播放

XML/HTML Code復制內容到剪貼板

functionautoPlayMusic(){
/*自動播放音樂效果，解決瀏覽器或者APP自動播放問題*/
functionmusicInBrowserHandler(){
musicPlay(true);
document.body.removeEventListener('touchstart',musicInBrowserHandler);
}
document.body.addEventListener('touchstart',musicInBrowserHandler);
/*自動播放音樂效果，解決微信自動播放問題*/
functionmusicInWeixinHandler(){
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady",function(){
musicPlay(true);
},false);
document.removeEventListener('DOMContentLoaded',musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded',musicInWeixinHandler);
}
functionmusicPlay(isPlay){
varmedia=document.getElementById('myMusic');
if(isPlay&&media.paused){
media.play();
}
if(!isPlay&&!media.paused){
media.pause();
}
}

Video有以下的屬性。

height pixels 設置視頻播放器的高度。

loop loop 如果出

現該屬性，則當媒介文件完成播放後再次開始播放。

preload preload 如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。

autoplay autoplay 如果出現該屬性，則視頻在就緒後馬上播放。

controls controls 如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。

如果使用 "autoplay"，則忽略該屬性。

src url 要播放的視頻的 URL。

width pixels 設置視頻播放器的寬度。

其中，如果想要實現自動播放，可以在Video裡面加上autoplay屬性就可以了。

㈤ html插入視頻的代碼是什麼

目前最簡單實用的代碼：
<video width="視頻寬度" height="視頻高度">
<source src="../media/cat.mp4" type="video/mp4;"></source>
</video>

H5視頻播放器簡單明了，SRC放入視頻路徑，唯一的缺點就是支持的格式不多，一般以MP4為主，不過這個也夠了，畢竟MP4是主流播放格式。所以H5視頻播放器夠用了。

㈥ HTML5代碼怎麼播放.qlv的視頻

可以考慮嵌入flash或其他第三方播放器播放。
可以用視頻轉換軟體把qlv文件轉換為mp4文件類型，再使用HTML5 video控制項播放。

㈦ HTML5播放器視頻顯示不完整！FLASH播放器正常顯示！

嘗試用谷歌瀏覽器看下，因為H5開發者都會以谷歌瀏覽器作為調試代碼的瀏覽器，回一般優先解決以答谷歌瀏覽器為核心的問題，像IE什麼的就僅做盡可能的兼容。

如果用谷歌還是這個樣子那就是這個網站的H5播放器還有bug，與你的設置無關

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

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

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

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

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

<param name="SAMIStyle" value>

<param name="SAMILang" value>

<param name="SAMIFilename" value>

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

<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">

<param name="WindowlessVideo" value="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">

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

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

<param name="defaultFrame" value="">

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

<param name="baseURL" value="">

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

<param name="volume" value="50">

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

<param name="uiMode" value="mini">

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

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

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

<param name="SAMIStyle" value>

<param name="SAMILang" value>

<param name="SAMIFilename" value>

</object>

㈨如何使用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>

㈩怎麼在html中加入視頻文件，代碼怎麼寫

通過html5中的video標簽添加視頻文件。

1、新建html文件，如圖所示，在body標簽中添加video標簽，為video標簽設置「src」屬性，屬性值是視頻文件地址，這里以html同一目錄下的「movie.mp4」視頻為例：

閱讀全文

h5播放器代碼

與h5播放器代碼相關的閱讀推薦