在 html5 网页中显示视频答案

【问题标题】：Display Video in html5 web在 html5 网页中显示视频
【发布时间】：2013-09-15 00:33:22
【问题描述】：

我需要在我的网页中播放视频。我使用以下代码进行测试。结果显示播放器，但不会播放视频。我使用更新后的 chrome 作为我的网络浏览器。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<video controls=controls>
    <source src = "q.mp4" type="video/mp4"/> 
</video>

</body>
</html>

注意-我的视频和网页包含在同一个文件夹中。

我改源码如下

<video width="400" height="300" controls>
       <source src="video.m4v" type="video/mp4">
       <source src="video.webm" type="video/webm" />
       <source src="video.ogg" type="video/ogg" />
</video>

现在 webm 文件在我的 waterfox 浏览器中播放，但在 chrome 和 IE 上的结果相同

【问题讨论】：

修复了现在使用 webm 在 chrome 和 firefox 中播放视频的问题。但机器人与 IE 一起工作

标签： javascript html video browser

【解决方案1】：

播放视频很棘手，你可以试试这个

<video width="400" height="300" controls>
  <source src="q.mp4" type="video/mp4">
  <object data="q.mp4" width="400" height="300">
  </object>
</video>

chrome 可能不支持您的 mp4 文件的编码 chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec

如果上述方法不起作用，您可以尝试flowplayer 它会先尝试使用 html5 播放视频，然后回退到 flash 播放器。

【讨论】：

【解决方案2】：

有两种方法可以做到这一点

使用 J 查询插件，例如 video.js 或使用 HTML5

here's the link

【讨论】：

我下载了 video.js。如果我正确的话，有一个演示页面它应该播放视频，但它有同样的问题
Brother 使用的是哪个浏览器？是不是 HTML5 浏览器？你能描述一下 Video.js 的问题吗，因为 video.js 在我的 chrome 和 Mozilla Firefox 上运行良好

【解决方案3】：

尝试为所有视频文件提供适当的编解码器。像这样：

<video width="400" height="360" controls>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    Your browser does not support the video tag.
</video>

【讨论】：

进入项目文件夹，直接从浏览器运行网页检查...如果你使用开发工具（如VS），调试可能不会给出正确的结果