網站使用視頻 video

最近公司要求首頁放四個介紹視頻，輪播圖形式播放。初步決定用html5中video。百度查詢後得知video有瀏覽器兼容問題。實踐後發現如下方式：

 

方法一：

video網頁視頻播放

1.視頻格式MP4 視頻編碼格式H264，主流瀏覽器均可播放（ie8以上）

2.mac下safari視頻加載有問題。經調查發現safari實現視頻播放需設置respons header中的content-range 實現斷點續傳。

以上準備完畢則視頻可播放。

在網上查到各大瀏覽器支持視頻格式：

但只要實現斷點續傳火狐和opera均可支持MP4格式。其餘格式未測試。

以上爲pc端實驗。

代碼以下：

<video id='video4' src="/static/video/v1.mp4" width="888px" height="500px" autoplay="" poster="/static/images/p56-v4.png" controls="controls"> 您的瀏覽器不支持視頻播放</video>

禁止下載視頻：單擊右鍵returnfalse：

<video id='video1' src="/static/video/v4.mp4" width="888px" height="500px" oncontextmenu="return false;" poster="/static/images/p56-v1.png" controls="controls">您的瀏覽器不支持視頻播放 </video>

 

 

方法二：

flash視頻播放

將視頻傳至優酷，並在html中嵌入一下代碼（替換上傳視頻地址）：

如下爲youku視頻的源代碼：（copy自優酷視頻）

<object type="application/x-shockwave-flash" data="//static.youku.com/v20170111.0/v/swf/loader.swf" width="100%" height="100%" id="movie_player">

<param name="allowFullScreen" value="true">

<param name="allowscriptaccess" value="always"

><param name="allowFullScreenInteractive" value="true">

<param name="flashvars" value="skincolor1=ffffff&amp;skincolor2=ffffff&amp;VideoIDS=XMjA5NTIyNjY0OA==&amp;ShowId=0&amp;category=102&amp;Cp=0&amp;unCookie=0&amp;frame=undefined&amp;uepflag=0&amp;Tid=0&amp;isAutoPlay=true&amp;playmode=1&amp;show_ce=1&amp;winType=interior&amp;Fid=0&amp;Pt=0&amp;Ob=0&amp;plchid=&amp;embedid=AjUyMzgwNjY2MgJ2LnlvdWt1LmNvbQIvdl9zaG93L2lkX1hNakE1TlRJeU5qWTBPQT09Lmh0bWw=&amp;ysuid=1476695865894pRp&amp;vext=bc%3D%26pid%3Dundefined%26unCookie%3Dundefined%26frame%3Dundefined%26type%3D1%26fob%3D0%26fpo%3D0%26svt%3D0%26cna%3DZZWHEKWDPk8CAcq9AWmRVmIo%26emb%3DAjUyMzgwNjY2MgJ2LnlvdWt1LmNvbQIvdl9zaG93L2lkX1hNakE1TlRJeU5qWTBPQT09Lmh0bWw%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&amp;cna=ZZWHEKWDPk8CAcq9AWmRVmIo&amp;pageStartTime=1484101689525">

<param name="movie" value="//static.youku.com/v20170111.0/v/swf/loader.swf">

<div class="player_html5">

<div class="picture" style="height:100%">

<div style="line-height:460px;">

<span style="font-size:18px">您尚未安裝flash播放器,請點擊<a href="//www.adobe.com/go/getflash" target="_blank">這裏</a>安裝</span></div></div>

</div>

</object>

 

 

未調查：

jplayer

html5media.min.js（聽說兼容IE8）

 

 

以上未完待續。。。