本文介绍了如何使用HTML5 `<video>` 元素向网页添加视频播放器，包括设置视频源、添加播放控件和自定义样式。通过`controls`属性实现播放器的基本控制，通过`poster`展示占位符图像，`autoplay`自动播放等特性。同时，文章讨论了如何支持多种视频格式，以及在旧版浏览器和不支持HTML5视频的情况下的回滚策略。
向网页中添加 HTML5 视频控件
2018-09-19
爱学习，爱生活，爱编程……希望能帮到你！更多
如何开始使用
采用它的最基本形式，使用 HTML5 元素向网页中添加视频播放器是通过一行 HTML 完成的。 添加 特性，且用户可以控制视频播放。其他特性可用于设置源文件、添加占位符图像或自动开始播放视频。与大多数 HTML 元素一样，可以使用层叠样式表 (CSS) 来设置元素的样式和位置。
HTML5 元素的语法为：
HTML5 Video is required for this example
对于一行代码，该示例便可完成几个操作。 特性指向要播放的视频文件。src 特性提供为视频元素指定内容的两种方法之一。若要播放视频，请将 src 特性分配给视频文件的 URL。
特性通知浏览器显示内置的播放控件。各个浏览器之间的内置控件在功能和外观方面可能有所不同。但至少，应包含“播放”和“暂停”控件、进度条或快进或快退视频的按钮以及计时器。视频播放时，通常会隐藏这些控件，然后当用户将其鼠标悬停在播放器上时重新显示这些控件。
最后， 是一个布尔型特性，该特性导致加载视频后开始播放视频。
我可以将视频元素与哪些特性结合使用？
视频元素支持很多用于控制视频播放和显示的特性。下表重点介绍基本视频特性。如果存在 元素的特性，则布尔型特性被视为 "True"，如果不存在，则被视为 "False"。
特性说明
表示指向视频文件的 URL 的字符串。
打开一组内置播放控件的布尔型特性。这通常包括播放、暂停、定位以及设置音量。 Internet Explorer 10 还显示用于选择多个音频和文本曲目的控件。
表示视频播放器中显示的占位符图像的字符串。仅当视频不可用时才显示海报图像，因为此时未设置源或者仍然正在加载内容。
重复重播视频直到按下控件上的暂停按钮或者从脚本调用 方法的布尔型特性。
在关闭音频曲目的情况下播放视频的布尔型特性。
在播放器缓冲了足够多的内容之后自动开始播放视频的布尔型特性。
定义需要多少缓冲的提示的布尔型特性。
设置视频播放器的高度(以像素为单位)。
设置视频播放器的宽度(以像素为单位)。
注意 如果仅设置了视频播放器的一个尺寸，例如高度，则视频播放器将视频大小调整到该尺寸并根据视频内容的纵横比缩放其他尺寸。如果将两个尺寸设置为与视频内容不匹配的纵横比，则播放器缩放最接近的尺寸以适应其尺寸，但会保持其纵横比。 视频将水平或垂直居中，两侧留有空白区域。
下一示例播放视频、在加载内容之前显示海报、使用播放控件重复播放视频。
HTML5 Video is required for this example
可以使用 HTML 在视频元素上设置前面所述的特性，但如果使用 JavaScript 会有更多可用选择。有关详细信息，请参阅 。
如何支持多种格式？
视频元素仅允许一次设置一个 特性。如果你知道要使用一种文件格式，则可正常工作。但如果希望支持多种文件格式和多种浏览器，则可以使用 元素。
元素与视频元素结合使用提供“最适合的”视频内容格式。这意味着，可以指定多种格式并且 HTML5 视频播放器选取最适合的一种格式。对于 Windows Internet Explorer，通常是 .mp4 文件，而对于其他浏览器，通常是 .ogg/.ogv 格式。此示例显示具有三种可能文件格式的视频元素：
Fallback code if video isn"t supported
/在此示例中，列出了三种格式，— mp4、webm 和 ogg 视频。根据浏览器的不同，视频元素选择它可以播放的一种格式。如果该示例不能播放任何一种格式，或者不支持 HTML5 视频，则该示例失败并显示 标记之间包含的文本。此“回滚”行为可以用于显示消息，或者可以包含嵌入的播放器。
在较旧的浏览器上会怎么样呢？
在没有插件或外部播放器的情况下向网页中添加视频，这对于在新 Windows UI 中运行 Windows Internet Explorer 9 或 Internet Explorer 10 的用户或者不支持插件的移动设备上的用户来说非常适合。但可能会使你的受众仅局限于支持现代浏览器的用户。使用视频和音频 HTML5 元素，可以在标记之间放置文本或代码，这些文本或代码仅在用户的浏览器不支持 HTML5 时执行。
注意 音频和视频元素不同于画布，因为元素之间的代码仅在不支持这两个元素时才执行。画布的独特之处在于，标记之间的代码虽然不显示，但在支持画布时却实际执行该代码。Canvas Shadow DOM 允许开发人员为屏幕读取器和其他设备提供辅助功能支持。 有关详细信息，请参阅 。
下一示例与上一示例类似，只是添加了一个对象标记，用于运行 Adobe Flash player 以支持较早版本的浏览器。
HTML5 Video is required for this example
在此示例中，如果浏览器支持 HTML5 视频，则它会尝试现有的视频格式。如果不支持 HTML5 视频，则会使用对象和嵌入的标记加载 Flash player。
用户回滚的另一选项是仅提供指向视频内容的链接，如此示例所示：
HTML5 Video is required for this example.
Download the video file.
有关使用 JavaScript 的 Windows 应用商店应用中的回滚技术的详细信息，请参阅 。
我可以添加一些样式吗？
可以使用 CSS 设置 HTML5 视频播放器的样式，以帮助将其集成到网页设计中。可以设置 和 ；指定 以及 ；使用 CSS 控制视频元素的 。
使用 CSS 的 属性，可以在视频元素上叠加图像、文本，甚至其他视频。此内容的一个示例就是画中画 (PiP)，它在同一屏幕中在较大的视频上叠加小视频。
画中画是一种通常用于在体育活动中显示相关内容(图表)，或是手语讲解员的技术。以下示例使用 CSS 在较大视频上放置小视频。它还使用 CSS 设置视频播放器的宽度，并且在插入图像的周围放置彩色边框。
#Video1
{
position:absolute;
top: 50px;
left:0px;
width:1000px;
border:2px solid blue;
display:block;
z-index:99;
}
#Video2
{
position:absolute;
top:80px;
left:60px;
width:300px;
border:2px solid red;
z-index:100;
}
HTML5 Video not supported
属性用于更改显示的顺序。通常情况下，网页上的元素按照创建的顺序进行显示。如果一个元素与另一个元素叠加，则最后呈现的元素将完全看不见。第二个视频帧的 z-index 设置为 100 以确保它是最上面的元素(假定在视频前创建了不到 100 个元素)。根据正在播放的视频的大小以及页面上元素的数量来定位第二个视频帧。
也可以使用其他 CSS 属性，如 可旋转图像、 可在视频元素上创建圆角，如以下示例所示。 有关详细信息，请参阅 参考页面。
Rotating a video/* Set basic style for video */
#theVideo
{
display:block;
position:absolute;
left:200px;
top:200px;
border: 2px solid red;
border-radius: 20px;
}
/* Light up the image as a button, change cursor */
#rotateVideo:hover
{
border:2px solid green;
cursor: hand;
}
// When the HTML elements load, call init()
document.addEventListener("DOMContentLoaded", init, false);
// Rotate the video by 30degrees when image is clicked
function init() {
var rotateVal = 0; // Global variable to hold current rotation value
document.getElementById("rotateVideo").addEventListener("click", function () {
rotateVal = (rotateVal += 30) % 360; // Calculate the next value, but keep between 0 and 360
var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
document.getElementById("theVideo").style.msTransform = temp; // Set the style
}, false);
}
This example requires Internet Explorer 9 or later
<
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。
http://www.pinlue.com/style/images/nopic.gif
扫一扫
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
