问题描述
一些背景
我已在FF和Safari（包括iDevices）中测试过我的视频，并且播放正常，但无法在Chrome浏览器中播放。正如你在下面的代码中看到的那样，我已经创建了mp4，m4v，webM和ogv文件，并且我已经在我的计算机上测试了它们的所有播放问题。
症状/问题
在Chrome中，视频似乎已加载，并且在控制台日志中没有错误。当按下播放按钮时，它会加载一部分文件，但不会播放它。然而，有趣的是，如果我随意点击时间栏中的稍后时间，大概在一半时间内，即使带有字幕，它也会播放大约5秒的视频，但是没有音频。 p>
我的研究
我已阅读过可能导致此问题的任何问题，但我没有找到任何想法的工作。请注意，我在.htaccess文件中写入了以下内容：
＃---------- -------------------------------------------------- ----------
＃适用于所有文件的MIME类型
＃------------------------ ----------------------------------------------
＃音频
AddType音频/ ogg ogg
AddType音频/ mp4 m4a
AddType音频/ webm webm
＃视频
AddType视频/ ogg ogv
AddType视频/ mp4 mp4 m4v
AddType视频/ webm webm
＃各种类型
AddType图片/ x-icon ico
AddType图片/ webp webp
AddType文本/缓存清单appcache清单
AddType文本/ x-组件htc
AddType应用程序/ x-chrome-extension crx
AddType应用程序/ x-opera-扩展oex
AddType应用程序/ 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库。
代码
以下是HTML：
< video width =100％height =400poster =assets / img / myVideo.jpgcontrols =controlspreload =none>
< source type =video / mp4src =assets / vid / PhysicsEtoys.m4v/>
< source type =video / mp4src =assets / vid / PhysicsEtoys.mp4/>
<！ - 适用于Firefox4，Opera和Chrome的WebM / VP8 - >
< source type =video / webmsrc =assets / vid / PhysicsEtoys.webm/>
< source type =video / oggsrc =assets / vid / PhysicsEtoys.ogv/>
<！ - 字幕 - >
< track kind =subtitlessrc =assets / vid / subtitles.srtsrclang =en/>
< track kind =subtitlessrc =assets / vid / subtitles.vttsrclang =en/>
<！ - 非JavaScript的非HTML5浏览器的Flash后备 - >>
< object width =100％height =400type =application / x-shockwave-flashdata =flashmediaelement.swf>
< param name =movievalue =flashmediaelement.swf/>
< param name =flashvarsvalue =controls = true& file = assets / vid / PhysicsEtoys.mp4/>
< img src =assets / img / myVideo.jpgwidth =320height =240title =无视频播放功能/>
< / object>
< / video>
以下是简单的js：
<$ p $ MediaElementplayer（{
特性：['playpause'，'progress'，'current'，'tracks'，'volume']，
startLanguage：'en'
}）;
有什么想法？
并在这个问题上的一切帮助！
在另一个人的帮助下，我们发现这是一个订购源的问题HTML文件中的文件。我了解到浏览器接受第一种可用的格式，它们似乎是.m4v文件的问题，所以我开始使用.mp4，然后是.webm。这里是在Safari（甚至在我的iPhone 5），Firefox，和Chrome 中的顺序：
< video width =100％height =400poster =assets / img / myVideo.jpgcontrols =controlspreload =none>
< source type =video / mp4src =assets / vid / PhysicsEtoys.mp4/>
<！ - 适用于Firefox4，Opera和Chrome的WebM / VP8 - >
< source type =video / webmsrc =assets / vid / PhysicsEtoys.webm/>
< source type =video / mp4src =assets / vid / PhysicsEtoys.m4v/>
< source type =video / oggsrc =assets / vid / PhysicsEtoys.ogv/>
<！ - 字幕 - >
< track kind =subtitlessrc =assets / vid / subtitles.srtsrclang =en/>
< track kind =subtitlessrc =assets / vid / subtitles.vttsrclang =en/>
<！ - 非JavaScript的非HTML5浏览器的Flash后备 - >>
< object width =100％height =400type =application / x-shockwave-flashdata =flashmediaelement.swf>
< param name =movievalue =flashmediaelement.swf/>
< param name =flashvarsvalue =controls = true& file = assets / vid / PhysicsEtoys.mp4/>
< img src =assets / img / myVideo.jpgwidth =320height =240title =无视频播放功能/>
< / object>
< / video>
现在，我必须重新检查m4v文件的编码（可能是一个问题基线与主要，高等）。
some background
I've tested my video in FF and Safari (including iDevices) and it plays properly, but it will not play in the Chrome browser. As you can see in the code below, I've created mp4, m4v, webM, and ogv files, and I've tested all of them on my computer for any playback issues.
the symptoms/issue
In Chrome, the video seems to load, and there are no errors in the console log. When the play button is pressed, it loads a portion of the file, but then does not play it. Yet, interestingly, if I arbitrarily click on a later time in the time-bar, say about halfway through, it will play about 5 seconds of the video even with the subtitles, but no audio.
my research
I've read up on any issues that might be causing this, but I haven't found any ideas that work. To note, I've written the following in my .htaccess file:
# ----------------------------------------------------------------------
# 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
Also, I am using the mediaelement.js library.
the code
Here's the 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>
Here's the simple js:
$('video,audio').mediaelementplayer({
features: ['playpause','progress','current','tracks','volume'],
startLanguage: 'en'
});
Any ideas?
Thanks for any and all help in this matter!
With some help from another person, we figured out it was an issue of ordering the source files within the HTML file. I learned that browsers accept the first usable format, and their seems to be an issue with the .m4v file, so I started with the .mp4, then .webm. Here's the order that works in Safari (even on my iPhone 5), Firefox, and Chrome:
<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
<!-- 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" />
<!-- 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>
Now, I'll have to re-check the encoding on the m4v file (perhaps an issue of Baseline vs Main, High, etc.).
这篇关于HTML5视频无法在Chrome中播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！