首页 > Web开发 > 详细

解决在html5页面中嵌入视频时只有声音却不显示图像的问题

时间:2016-02-26 14:09:24      阅读:749      评论:0      收藏:0      [点我收藏+]

我也是一个小菜鸟,一次在做练习时遇到一个问题,就是在html5页面中嵌入视频的时候页面中只显示声音却不显示图像。HTML5中并没有指定视频解码器,它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式(注:H.264是公认的mp4的标准编码)的视频,Firefox和Opera是坚持开源Theora 和Vorbis格式。因此,指定HTML5的视频时,你必须提供这两种格式。刚开始我以为视频的格式不对,我嵌入的视频是mp4格式的,可是试了好多次结果都一样,只有声音不显示图像,以前从没遇到过这种情况,瞬间懵了。后来上网查了查,才知道原来视频不光区分格式,相同的格式的情况下还区分编码。就拿mp4格式的视频来说吧,mp4有3种编码,mpg4(xdiv),mpg4(xvid),avc(h264),这三种格式虽然在播放器里可以正常播放,但是mpg(xdiv),mpg4(xvid)这两种格式嵌到html5页面里的时候就会出现上述我说的那种情况,转换成H264编码就可以网页正常播放了。可是如何给我们的视频转码(转换编码)呢?下面我就介绍一下如何使用格式工厂来转码(之所以我介绍用格式工厂来转码是因为我觉得格式工厂的功能太强大了,不仅能转换视频的格式还可以剪辑视频、音频,竟然还可以转换视频的编码,集多功能于一身):
对于扩展名相同的视频文件它们的视频的编码可能是不一样的,如mp4格式的视频的编码就可能是mpg4(xdiv)或mpg4(xvid)或avc(h264),在用格式工厂软件进行视频转换时可以设置视频的编码格式,使视频可以让不同的播放器打开。

 


第一步:打开格式工厂软件,这里我以把视频转换为mp4格式为例说明单击[->mp4]按钮

技术分享


第二步:单击[添加文件]按钮

技术分享


第三步:单击选择文件,单击[打开]按钮


技术分享


第四步:单击[输出配置]按钮


技术分享


第五步:可以看到现在的“视频编码”右边的值是“MPEG4(Xvid)”,单击这一行,会出现下拉按钮


技术分享


技术分享


第六步:点击下拉按钮,在弹出的下拉列表中选择需要的编码,如在这里我单击选择“AVC(H264)”,然后单击[确定]按钮


技术分享


第七步:单击[确定]按钮


技术分享


第八步:单击[点击开始]按钮开始任务


技术分享


然后导出来的视频就可以再页面里面正常播放了。

解决在html5页面中嵌入视频时只有声音却不显示图像的问题

原文:http://www.cnblogs.com/sweet-sunshine/p/5220151.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!