码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-06-28 21:27:11      阅读:20342      评论:2      收藏:0      [点我收藏+]

标签:

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),然后在网页中代码调用,看是否解决问题。

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

标签:

(7)
(27)
   
举报
评论 一句话评论(2
2015-10-11 16:02:16
没错没错  我也是遇到这个问题    多亏了这篇文章  转成AVC就可以了.
回复
 (5)
 (5)
2017-07-05 12:19:13
没错没错  我也是遇到这个问题    多亏了这篇文章  转成AVC就可以了.
完美的解决了问题
回复
 (0)
 (0)
2条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!