mp4网页播放代码，有声音无图像的解决办法~

时间：2024-12-20 07:08:11

关于网页播放mp4格式的视频，找了一些插件，这里推荐一下 

官方网址：/

github ：/videojs//

demo：/downloads/video-js-4.12.

使用方法：

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


   
   
    

  1. 
<link href="///path/to/" rel="stylesheet">

    2. 

  2. 
<script src="///path/to/"></script>

    3. 

  3. <script>
    4. 

  4. 
  videojs.options.flash.swf = "/path/to/"

    5. 

  5. </script>
    6.
    ② 设置video参数（设置mp4视频地址） 

   
   
    

  1. 
<video id="example_video_1" class="video-js vjs-default-skin"

    2. 

  2. 
  controls preload="auto" width="640" height="264"

    3. 

  3. 
  poster="/"

    4. 

  4. 
  data-setup=‘{"example_option":true}‘>

    5. 

  5. 
 <source src="/oceans-clip.mp4" type=‘video/mp4‘ />

    6. 

  6. 
 <source src="/" type=‘video/webm‘ />

    7. 

  7. 
 <source src="/" type=‘video/ogg‘ />

    8. 

  8. 
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="/html5-video-support/" target="_blank">supports HTML5 video</a></p>

    9. 

  9. </video>
    10.

 

使用demo里面的mp4视频源，播放一切正常，换上自己的mp4源发现只有声音并没有图像。这让我很为难。

想来想去这跟插件没关系，跟浏览器没有关系，跟自己视频源的格式编码有关系。

找了很多办法，尝试过swf播放，但是mp4转码成swf格式，失真太严重，导致视频很模糊，质量很糟糕。

下载了格式工厂，尝试着转换了很多格式，都不尽人意。

发现mp4的视频编码有三种：MPEG4(DivX),MPEG4(Xvid),AVC(H264)，我使用格式工厂一个一个尝试。

最终发现转换成AVC(H264)编码，完美解决问题。

总结：网页播放mp4视频，出现有声音无图像问题，先使用格式工厂转换mp4->mp4格式,输出编码选择AVC(H264),然后在网页中代码调用，看是否解决问题。

相关文章