HTML5 视频无法在 Safari 中播放
我一直致力于 HTML5 视频实现，但遇到了一些问题。我一直在遵循 http://diveintohtml5.info/video.html 上的指南。我已对所有视频进行了 .m4v、.ogv 和 .webm 版本的编码。 Chrome 和 Firefox 播放视频没有任何问题。当我尝试在 Safari 中播放它时，它会加载视频容器，但不会加载视频。您会看到视频所在的空白区域、控件和“正在加载”文本。在 Web Inspector 的网络选项卡中，视频的状态为“待处理”，mime 类型为“未定义”。有趣的是，我只在临时站点上遇到这个问题，而它在我的本地开发人员上运行良好。
当我直接在本地开发的浏览器中访问视频时，我在控制台中得到以下输出：
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
请注意，检查器中 GET 的左侧有一个小红色 x。
我的 html 代码如下所示：
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
另外，视频约为 20mb。
有什么想法吗？谢谢！
I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.
When I visit the video directly in the browser on local dev, I get the following output in the console:
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
Note that GET has a little red x to the left of it in the inspector.
My html code looks like:
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
Additionally, the video is ~20mb.
Any thoughts? Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
嗯...事实证明，问题的发生是因为我使用 .htaccess 来密码保护目录。有趣的是，除 Safari 之外的所有浏览器都允许访问视频文件。感谢那些提供帮助的人！
Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!
尝试编码为 mp4 并替换此文件而不是 m4v 格式，更新代码并运行。
工作还好啊
Try encoding to mp4 and replace this file instead m4v format, update your code and run.
Work's fine.