HTML 5 视频标签不适用于任何浏览器答案

【问题标题】：HTML 5 Video tag not working for any browserHTML 5 视频标签不适用于任何浏览器
【发布时间】：2014-06-30 01:16:23
【问题描述】：

所以我使用 AnyConverter 将.mov 转换为.mpf、.ogv 和.webm 格式。然后我将它们放在视频目录中并使用以下代码

 <video width="500" height="281">
    <source src="/video/video.mp4" type="video/mp4" />
    <source src="/video/video.ogv" type="video/ogg" />
    <source src="/video/video.webm" type="video/webm" />
</video>

但是，该视频不会在 Sarari、Chrome 或 Firefox 最新版本中显示。我正在使用 HTML 5 Doctype，但不确定发生了什么。有什么建议吗？

编辑

奇怪，我将路径更改为完整的 url，但它仍然不起作用。然后，当我在 Firefox 中粘贴 url 时，视频播放了。我想知道它是否在视频标签之外......

【问题讨论】：

在任何浏览器中都可以播放吗？
检查MIME types 的服务器配置，如下所述：stackoverflow.com/questions/9220537/…
我也有这个问题。整理好了我正在使用角度 JS。我在视频 src 属性中有 src={{selectedVideo.url}} 。该网址来自 API 调用。虽然当我检查它时正确的 url 在元素中，但它仍然没有播放。原来我需要在新的 src 更新后加载视频播放器。所以像：video_player_id.load();希望这会有所帮助。

标签： html html5-video

【解决方案1】：

检查您的视频文件名是否在单词之间包含任何空格，然后将其删除或替换为 HTML 空格 %20：

不好：

/video/My Video.mp4

好：

/video/My%20Video.mp4

【讨论】：

【解决方案2】：

 <video width="500" height="281" controls>
     <source src="/video/video.mp4" type="video/mp4" />
     <source src="/video/video.ogv" type="video/ogg" />
     <source src="/video/video.webm" type="video/webm" />
</video>

it will still render as audio because mp4 is still not fully supported.
To solve this problem, place the currently supported format at the top.
like this:

<video width="900" height="600" controls>
     <source src="/video/video.webm" type="video/webm"> 
     <source src="/video/video.ogg" type="video/ogg">
     <source src="/video/video.mp4" type="video/mp4">
</video>

【讨论】：

【解决方案3】：

您在编辑中指出的内容似乎指向 mime 类型问题。我在answer 中总结了一些与 HTML5 视频播放有关的常见故障排除步骤。

有 3 件事需要检查：

确保您的视频文件已正确编码以用于网络传输
确保托管视频的服务器已正确配置为网络传输
确保页面上的其他脚本不会干扰视频播放

让我们知道它是否有效。

【讨论】：

【解决方案4】：

确保视频文件的路径正确。其余代码没问题

在视频标签上添加控件属性，例如：这是完整的参考http://www.w3schools.com/html/html5_video.asp

<video width="500" height="281" controls>
    <source src="/video/video.mp4" type="video/mp4" />
    <source src="/video/video.ogv" type="video/ogg" />
    <source src="/video/video.webm" type="video/webm" />
</video>

【讨论】：

stackoverflow.com/q/21004335/1830909 和 stackoverflow.com/a/46983622/1830909 的好点
这表明需要 controls 属性才能使其工作，这听起来很无意义，因为它是可选的。 controls: If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback 这是因为当我添加控件属性时它仍然无法正常工作。当我在 video 元素上使用 src 属性时，当我在 video 元素中使用 source 元素时，它不起作用。

【解决方案5】：

在视频节点上添加controls属性

示例：

<video width="500" height="281" controls>
   ...
   ...
</video>

【讨论】：