跨瀏覽器兼容的內嵌視頻解決方案

我公司正在開始發佈大量在線教程/培訓視頻，這些視頻將在網頁上以內聯方式顯示。我們需要一個簡單的跨瀏覽器解決方案，可以適應大多數用戶進行內聯查看。跨瀏覽器兼容的內嵌視頻解決方案

我讀過的一個解決方案（這不是很簡單）就是爲每個視頻創建一個flash，mp4和avi版本，並讓一個javascript插件確定哪個瀏覽器最適合。

來源

2011-08-17 Eric Di Bari

是否有一個視頻格式，旨在爲未來的html5標準？ –

如果蘋果支持WebM格式，它可能會在不久的將來發生，因爲我相信IE9現在支持WebM，但是他們會這麼做，因爲它們與專有的H264格式密切相關，這是非常令人懷疑的。 –

對於一個商業解決方案退房http://www.sublimevideo.net/

對於免費檢查http://www.videojs.com/

來源

2011-08-17 15:33:49 Daveo

我也使用http://www.videojs.com/，也是最簡單的方法來完成這項工作。+1 –

你檢查任何jQuery插件？那裏有很多，這很好的跨瀏覽器。你可以檢查http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

來源

2011-08-17 15:35:24 Jayesh

我已經在所有瀏覽器上進行視頻播放的實驗。做到這一點的最好方法是設置一個閃回回退的html5視頻標籤。這實際上並不需要任何JavaScript的工作。本網站：http://camendesign.com/code/video_for_everybody對如何做到這一點給出了一個很好的解釋。

你會想一些設置，基本上是這樣的：

<video width="640" height="360" controls> 
    <!-- MP4 must be first for iPad! --> 
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari/iOS video --> 
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox/Opera/Chrome10 --> 
    <!-- fallback to Flash: --> 
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> 
     <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> 
     <param name="movie" value="__FLASH__.SWF" /> 
     <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> 
     <!-- fallback image. note the title field below, put the title of the video there --> 
     <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" 
      title="No video playback capabilities, please download the video below" /> 
    </object> 
</video>

視頻標記是HTML5的標籤，你可以用它來顯示在現代瀏覽器中的視頻文件。但是，您將需要幾種不同的格式才能在每個格式中正確顯示它。例如，Firefox只採用webm和ogg格式，而Safari只採用h264和mp4格式。這裏有一篇很棒的文章：http://diveintohtml5.ep.io/video.html。您可以下載一個簡單的轉換軟件將您的視頻轉換爲所有這些格式：http://www.mirovideoconverter.com/。其他瀏覽器（特別是IE）不使用html5視頻標籤，而是必須包含Flash格式，如果它不知道如何處理視頻標籤，它將自動回退。

最後，由於缺乏兼容的標準，您最終必須創建至少3-4種不同格式的視頻文件，才能在瀏覽器和平臺（iOS移動設備）上運行。確保你的服務器使用這些格式的正確的MIME類型也很重要。它很糟糕，但現在它是唯一的方法。

來源

2011-08-17 15:41:05

迄今爲止最好的解決辦法：

http://www.videojs.com/

如何實現：

頭：

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/c/video.js"></script>

體：

<div class="vid"> 
    <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px" 
     poster="../../Content/YourInitialPicture.jpg"> 
     <source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE/Safari --> 
     <source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF --> 
     <source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome/Opera --> 
     <track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" /> 
    </video> 
    <script> 
     var myPlayer = _V_("vid01"); 
    </script> 
</div>

複製/粘貼上面的代碼到你的<body></body>並添加到src="../../"

的MP4視頻的路徑（Safari和IE瀏覽器可以播放此類型的西元的）
.webm（Mozilla的可以玩這種類型的西元）
。ogg（Theora視頻）

您可以使用這些免費方式爲您的視頻。

Free Video Converter（這conventer很容易使用。我個人比較喜歡這個。）
Free WebM Video Converter

簡單，因爲這！

來源

2012-09-14 07:06:58

好的解決方案。第一個建議的視頻轉換器是非常好的。 – Alex

對我而言有效：我已經將視頻上傳到YouTube，然後將其下載爲MP4，並且它似乎可以在各種瀏覽器中使用video標籤。

來源

2014-05-05 11:12:07 Cosmin

如果您只想將其轉換爲mp4，則可以使用ffmpeg。 – Octopus

我一直在研究這個很長一段時間，我試圖做同樣的事情，所以希望這會幫助別人。我一直在使用crossbrowsertesting.com，並在幾乎所有人都知道的瀏覽器中進行測試。我目前使用的解決方案在Opera，Chrome，Firefox 3.5+，IE8 +，iPhone 3GS，iPhone 4，iPhone 4s，iPhone 5，iPhone 5s，iPad 1+，Android 2.3+，Windows Phone 8中都可以使用。

動態改變資源

動態改變視頻是非常困難的，並配有閃光燈回退，你將不得不從DOM /頁刪除該視頻，並重新添加它，這樣Flash將更新，因爲Flash將無法識別動態更新Flash vars。如果您要使用JavaScript動態更改它，我會完全刪除所有<source>元素，並僅使用canPlayType在JavaScript中設置src，在第一個支持的視頻類型後設置break或return，並且不要忘記動態更新Flash var mp4。另外，除非您致電video.load()，否則某些瀏覽器不會註冊您更改了源代碼。我認爲您遇到的問題可以通過首先撥打video.pause()來解決。刪除和添加視頻元素會降低瀏覽器速度，因爲它會繼續緩存已刪除的視頻，但there's a workaround。

跨瀏覽器支持

至於實際的跨瀏覽器的一部分，我在Video For Everybody到達爲好。我已經嘗試了MediaelementJS Wordpress插件，結果導致比解決問題更多的問題。我懷疑這些問題是由於Wordpress插件導致的，而不是真正的庫。如果可能的話，我試圖找到沒有JavaScript的東西。到目前爲止，我想出了是這樣的純HTML：

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive"> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> 
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" /> 
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" /> 
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297"> 
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
    <param name="allowFullScreen" value="true" /> 
    <param name="wmode" value="transparent" /> 
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" /> 
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" /> 
</object> 
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a> 
</video>

重要提示：

最後決定將在OGG作爲第一<source>因爲的Mac OS火狐退出試圖播放該視頻如果遇到MP4作爲第一個<source>。
正確的MIME類型很重要。OGV文件應該video/ogg，不video/ogv
如果你有高清視頻，我已經找到了HD質量的OGG文件的最佳轉碼器是Firefogg
的.iphone.mp4文件是爲iPhone 4+這將僅使用H.264 Baseline 3視頻和AAC音頻播放MPEG-4視頻。我發現這種格式的最佳代碼轉換器是Handbrake，使用iPhone & iPod Touch預設將在iPhone 4+上運行，但爲了讓iPhone 3GS運行，您需要使用iPod預設，其分辨率要低得多添加爲video.iphone3g.mp4。
未來，我們將能夠在<source>元素上使用media屬性來針對具有媒體查詢的移動設備，但是現在，較早的Apple和Android設備不能很好地支持這一點。

來源

2014-07-19 02:16:51

跨瀏覽器兼容的內嵌視頻解決方案

回答

相關問題