Info110站长资讯网-中国站长的资源库，资讯、代码、教学、评测 - 网页制作 - 网页播放Mp4视频代码及解决有声音无图像的办法

发表于:2018-10-10 浏览:34 作者:zhaods 来源:互联网

关键字:Mp4,视频播放

描述: 关于网页播放mp4格式的视频，找了一些插件，这里推荐一下video.js  官方网址：http://www.videojs.com/ github：https://github.com/videojs/video.js/ demo：http://www.videojs.com/downl

 关于网页播放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文件

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

    ② 设置video参数（设置mp4视频地址）

1. <video id="example_video_1" class="video-js vjs-default-skin"
2. controls preload="auto" width="640" height="264"
3. poster="http://video-js.zencoder.com/oceans-clip.png"
4. data-setup=‘{"example_option":true}‘>
5. <source src="http://video-js.zencoder.com/oceans-clip.mp4" type=‘video/mp4‘ />
6. <source src="http://video-js.zencoder.com/oceans-clip.webm" type=‘video/webm‘ />
7. <source src="http://video-js.zencoder.com/oceans-clip.ogv" type=‘video/ogg‘ />
8. <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>
9. </video>

 

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

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

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

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

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

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

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

查看完整版本: Info110站长资讯网-中国站长的资源库，资讯、代码、教学、评测