我想要一些关于在我的网站上创建 HTML5 视频部分的最佳方法的指导，该部分完全跨浏览器兼容，在响应式布局中工作（因此不是固定尺寸），并且还支持 IOS/ipad 和其他移动设备。我看过几篇文章，包括（http://diveintohtml5.info/video.html）。我已经尝试过 mediaelement.js 和 Video.js，但在较旧的 Internet Explorer 浏览器（特别是 IE8 及更低版本）上仍然存在问题，IE9 工作正常。如果有人能指出我使用 HTML5 视频实现这一目标的正确方向，那将是一个很大的帮助，因为我只是没有找到我要去的地方！多谢。
问问题
2119 次
2 回答
0
澄清一下，您是否尝试过使用 Flowplayer 为 IE8 及更低版本播放视频的 Flash 版本的 html5 技术？
代码和工作示例位于http://diveintohtml5.info/video.html的最后
页面上的示例似乎对我在 IE7 和 IE8 上运行良好，尽管我正在 Mac 上的虚拟盒子上进行测试，所以这可能会改变一些东西。
祝你好运！
于 2013-04-25T13:33:43.650 回答
0
跨浏览器 HTML 视频代码
下面是一个完全跨浏览器的HTML5 视频播放器代码集，您可以使用它提供“可能性”来支持旧浏览器中的许多旧插件和视频播放器。它使用最新的 HTML5 设计，但添加了旧浏览器的旧'object'元素'embed'。
<figure aria-labelledby="videocaption3">
<!-- VIDEO: The HTML5 'video' element is the primary source of the various video fallback elements below. Older browsers like IE 5-8 (using ActiveX) that do not recognize the 'video' HTML5 element will try and load the 'object' element version instead. -->
<video
id="video3"
controls="controls"
preload="metadata"
style="width:320px;height:180px;border:none;outline:none;"
title="My Video"
aria-label="My Video">
<!-- SOURCE: In this old ActiveX version, Microsoft Windows in Internet Explorer used the object ActiveX form while all other browsers used the 'embed' element below as fallback. -->
<source src="video3.mp4" type="video/mp4" />
<source src="video3.ogv" type="video/ogg" />
<!-- OBJECT: In this old ActiveX version, Microsoft Windows in Internet Explorer used the object ActiveX form while all other browsers used the 'embed' element below as fallback. -->
<object
id="object3"
name="object3"
data="video3.wmv"
type="video/x-ms-wmv"
style="width: 320px;height: 180px;border: none;outline: none;"
title="My Video"
aria-label="My Video">
<!-- EMBED: In this old version, non-Internet Explorer, older, non-HTML5 browsers would recognize this fallback 'embed' version element and call their plugins and players to display the file below. Additional fallback in the form of a 'noembed' element with alert text would trigger for those user agents that do not support multimedia or the embed tag (as it was never part of an official HTML release). I recommend you use this old syntax if you are supporting older browsers that do not understand the newer HTML5 elements. -->
<embed
id="embed3"
src="video3.wmv"
type="video/x-ms-wmv"
style="width: 320px;height: 180px;border: none;outline: none;"
title="My Video"
aria-label="My Video">
<noembed>-->
<!-- FALLBACK TEXT ALERT: If the user agent does not support video, give them a simple text alert below. -->
Sorry, your browser does not support this video.
</noembed>
</embed>
</object>
</video>
<!-- CAPTION: Captions wrap around the video elements the same as img, picture, and audio elements. -->
<figcaption id="videocaption3"><small>"My Video"</small></figcaption>
</figure>
此代码库应支持支持该'video'元素的 HTML5 浏览器，以及可追溯到 2000 年或更早的各种旧浏览器，在 HTML5 之前，仅支持'embed'或'object'元素。在过去，“object”用于 IE 中的 ActiveX 插件，“embed”用于 Netscape 4（以及后来出现的用户代理）。HTML5 仍然支持“对象”和“嵌入”，尽管它们将依赖播放器/插件/ActiveX 来播放多媒体。'video' 元素现在是大多数现代浏览器的原生元素，但只能在支持 HTML5 的较新浏览器（例如 IE9-11）中可靠地工作。大多数 HTML5 浏览器（2010 年后）应该支持 'video' 元素并忽略其他两种类型。如果不这样做，只要它们都支持移动编码类型并且安装了播放器来播放它，它们就会退回到其他元素。
问题
您播放跨浏览器视频时可能遇到的主要问题不是 HTML，而是旧浏览器的众多版本、已安装（或未安装）已弃用的播放器、支持的电影编码类型以及操作系统（Mac 与 Windows 与？）。再加上有限的移动浏览器支持，您确实需要通过可靠的嵌入式第三方服务（如 YouTube）提供视频。通常，许多旧浏览器根本不支持您提供的视频编码。在其他情况下，操作系统会限制对电影类型的支持。例如，.wmv很久以前用于 Windows，而 Quicktime.mov用于 Mac。
2004 年以后的许多旧浏览器开始支持.flv或 Flash 电影来处理这种跨浏览器电影问题。Flash.flv曾经为网页中的视频提供了最广泛的支持，因为几乎每个人都同时安装了 Flash（c. 2008）。现在 Flash 播放器在 2017 年被弃用，你现在也不能依赖它。这就是为什么使用 HTML5 'video' 元素是最广泛采用的最佳起点。
今天，有许多更新的替代视频播放器有助于在较新的浏览器中支持视频，而不是较旧的浏览器。如果您确实尝试提供跨浏览器解决方案，我建议您尝试并继续使用.mp4以涵盖大多数现代浏览器和播放器，以及一些较旧的浏览器和播放器。现实一点，设计一个尝试针对特定群体的解决方案，而不是一个通用的集合，这对于过去 20 年的众多视频播放器来说是很难做到的。
于 2021-05-25T23:19:30.070 回答