1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
</head>

<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="300" height="170" poster="../images/audi/audi_poster.png"
 data-setup="{}">
 <source src="../videos/audi/audi.mp4" type='video/mp4'>
 <source src="../videos/audi/audi.ogg" type='video/ogg'>
 <source src="../videos/audi/audi.webm" type='video/webm'>

 </video>
 </body>
 </html>

对于上述代码，该文件在 Google Chrome 上播放没有任何错误，但在 Firefox 和 IE 上则没有。

我不知道我错在哪里..请帮助..我真的需要解决这个问题。请帮忙

该网站在goddady服务器上运行。我没有使用任何数据库来存储视频文件，也没有使用任何 php 编程。我只是将视频上传到服务器 n 的 html 文件...这是一个非常简单的页面，我想拥有所有 3 个浏览器的视频播放..

4

1 回答 1

1

HTML5video和audio标签支持目前不是最友好的。

首先，您的 DOCTYPE 应<!DOCTYPE html>如评论中所述。然后有几件事需要考虑：

  1. Firefox 不支持 MP4 播放，Opera 也不支持。您需要将视频从 MP4 转换为 WEBM 或 OGG 格式，并将它们放在与 MP4 相同的目录中以适合您的示例。
  2. IE8 及以下版本根本不支持该<video>标签，我猜这是您的 IE 版本的问题。但是，IE9 确实支持 MP4 播放。

在为我目前正在从事的项目玩得很好之后，我还遇到了一些问题：

  1. iOS 设备（和一般的移动设备）不太喜欢这个标签（尤其是内联标签），玩了一段时间后，我最终直接链接到了 MP4 视频，现在它在默认播放器中打开了。
  2. Google Chrome 或 IE9 尚不支持全屏按钮，但 Safari 支持。没有检查过FF或Opera，见下文。

  3. 避免用户需要上传 3 个不同的文件。我为 FF 和 Opera（以及任何不支持 MP4<video>播放的浏览器）添加了 Flash 后备 (Flowplayer)。我可能会在服务器上创建 WEBM 或 OGG 文件，但这也有助于使用 IE8 等较旧的浏览器。以下是有关如何检查对 MP4 播放的支持的JavaScript片段：

    var flashaudioplayer=false;
var flashvideoplayer=false;

// Check if browser supports HTML5 native mp3/mp4 playback
var audioTag = document.createElement('audio');
var videoTag = document.createElement('video');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
flashaudioplayer=true;

}
if (!(!!(videoTag.canPlayType) && ("no" != videoTag.canPlayType("video/mp4")) && ("" != videoTag.canPlayType("video/mp4")))) {
flashvideoplayer=true;
}

  4. 您还会发现<audio>标签中的 MP3 播放支持存在同样的问题，Flowplayer 也有播放 MP3 文件的方法，因此它是 Flash 后备的不错选择。

于 2012-06-18T05:21:13.200 回答