大佬教程收集整理的这篇文章主要介绍了HTML5视频不会在Chrome中播放,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在FF和Safari(@L_197_0@iDevices)中测试了我的视频,并且播放正常,但它不会在Chrome浏览器中播放。您可以在下面的@L_489_1@中看到,我已经创建了mp4,m4v,webM和ogv文件,我已经在我的电脑上测试了所有播放问题。
症状/问题
在Chrome中,视频似乎加载,控制台日志中没有错误。当按下播放按钮时,它加载文件的一部分,但是不播放。然而,有趣的是,如果我在时间栏中稍后点击,说一半,即使使用字幕,也不会播放音频,播放约5秒的视频。
我的研究
我已经阅读了可能导致这一点的任何问题,但是我没有发现任何有用的想法。要注意,我在.htaccess文件中写了以下内容:
# ---------------------------------------------------------------------- # Proper MIME type for all files # ---------------------------------------------------------------------- # Audio AddType audio/ogg oga ogg AddType audio/mp4 m4a AddType audio/webm webm # Video AddType video/ogg ogv AddType video/mp4 mp4 m4v AddType video/webm webm # Assorted types AddType image/x-icon ico AddType image/webp webp AddType text/cache-manifest appcache manifest AddType text/x-component htc AddType application/x-chrome-extension crx AddType application/x-opera-extension oex AddType application/x-xpinstall xpi AddType application/octet-stream safariextz AddType application/x-web-app-manifest+json webapp AddType text/x-vcard vcf AddType text/plain srt
另外,我正在使用mediaelement.js库。
@L_489_1@
这是HTML:
<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none"> <!-- M4V for Apple --> <source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" /> <!-- MP4 for Safari,IE9,iPhone,iPad,Android,and Windows Phone 7 --> <source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" /> <!-- WebM/VP8 for Firefox4,Opera,and Chrome --> <source type="video/webm" src="assets/vid/PhysicsEtoys.webm" /> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" /> <!-- Subtitles --> <track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" /> <track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" /> <!-- Flash fallBACk for non-HTML5 browsers without JavaScript --> <object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" /> <!-- Image as a last resort --> <img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playBACk capabilities" /> </object> </video>
这是简单的js:
$('video,audio').mediaelementplayer({ features: ['playpause','progress','current','tracks','volume'],startLanguage: 'en' });
有任何想法吗?
感谢任何和所有的帮助在这件事!
<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none"> <!-- MP4 for Safari,and Chrome --> <source type="video/webm" src="assets/vid/PhysicsEtoys.webm" /> <!-- M4V for Apple --> <source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" /> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" /> <!-- Subtitles --> <track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" /> <track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" /> <!-- Flash fallBACk for non-HTML5 browsers without JavaScript --> <object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" /> <!-- Image as a last resort --> <img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playBACk capabilities" /> </object> </video>
现在,我必须重新检查m4v文件上的编码(也许是Baseline vs Main,High等等)。
以上是大佬教程为你收集整理的HTML5视频不会在Chrome中播放全部内容,希望文章能够帮你解决HTML5视频不会在Chrome中播放所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。