mp4網頁播放代碼，有聲音無圖像的解決辦法~

 

 

關於網頁播放mp4格式的視頻，找了一些插件，這里推薦一下video.js 

官方網址：http://www.videojs.com/

github ：https://github.com/videojs/video.js/

demo：http://www.videojs.com/downloads/video-js-4.12.5.zip

使用方法：

    ①引入文件：指派flash播放的swf文件

<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>

    ② 設置video參數（設置mp4視頻地址）

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

 

使用demo里面的mp4視頻源，播放一切正常，換上自己的mp4源發現只有聲音並沒有圖像。這讓我很為難。

想來想去這跟插件沒關系，跟瀏覽器沒有關系，跟自己視頻源的格式編碼有關系。

找了很多辦法，嘗試過swf播放，但是mp4轉碼成swf格式，失真太嚴重，導致視頻很模糊，質量很糟糕。

下載了格式工廠，嘗試着轉換了很多格式，都不盡人意。

發現mp4的視頻編碼有三種：MPEG4(DivX),MPEG4(Xvid),AVC(H264)，我使用格式工廠一個一個嘗試。

最終發現轉換成AVC(H264)編碼，完美解決問題。

總結：網頁播放mp4視頻，出現有聲音無圖像問題，先使用格式工廠轉換mp4->mp4格式,輸出編碼選擇AVC(H264),然后在網頁中代碼調用，看是否解決問題。