HTML5 是一种用于结构化和呈现互联网内容的标记语言，它提供了一种方式来嵌入视频内容到网页中，而无需使用任何插件或第三方软件，在 HTML5 中，我们可以使用 <video> 标签来嵌入视频。
1\. 基本的视频嵌入
最基本的 HTML5 视频嵌入代码如下：
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
在这个例子中，<video> 标签定义了一个视频播放器。width 和 height 属性定义了播放器的尺寸。controls 属性添加了播放、暂停和音量控制。
<source> 标签定义了视频文件的来源。src 属性指定了视频文件的路径，type 属性指定了视频文件的格式，在这个例子中，我们同时提供了 MP4 和 Ogg Theora 两种格式的视频文件，以兼容不同的浏览器。
如果浏览器不支持 <video> 标签，将显示 <video> 标签内的内容，在这个例子中，我们将显示 "Your browser does not support the video tag."。
2\. 自定义控件
HTML5 还允许我们自定义视频控件，我们可以添加播放、暂停和全屏按钮：
<video id="my-video" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div id="video-controls">
<button id="play-pause">Play</button>
<button id="fullscreen">Fullscreen</button>
</div>
<script>
var myVideo = document.getElementById("my-video");
var playPauseButton = document.getElementById("play-pause");
var fullscreenButton = document.getElementById("fullscreen");
playPauseButton.addEventListener("click", function() {
if (myVideo.paused) {
myVideo.play();
playPauseButton.innerHTML = "Pause";
} else {
myVideo.pause();
playPauseButton.innerHTML = "Play";
}
});
fullscreenButton.addEventListener("click", function() {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
} else if (myVideo.mozRequestFullScreen) { // Firefox
myVideo.mozRequestFullScreen();
} else if (myVideo.webkitRequestFullscreen) { // Chrome, Safari and Opera
myVideo.webkitRequestFullscreen();
} else if (myVideo.msRequestFullscreen) { // IE/Edge
myVideo.msRequestFullscreen();
}
});
</script>
在这个例子中，我们首先获取了 <video> 元素和两个按钮的引用，我们为播放/暂停按钮添加了一个点击事件监听器，当用户点击这个按钮时，视频将在播放和暂停状态之间切换，我们还为全屏按钮添加了一个点击事件监听器，当用户点击这个按钮时，视频将在全屏和非全屏状态之间切换。
3. 其他属性和方法
除了上述的基本功能外，HTML5 <video> 标签还有许多其他的属性和方法，
poster 属性：指定视频播放器的封面图片。
preload 属性：指定页面加载时是否预加载视频，可能的值有 "none"（不预加载）、"metadata"（只预加载元数据）和 "auto"（自动预加载）。
loop 属性：指定视频是否循环播放，如果设置为 "true"，视频将在结束播放后重新开始播放，如果设置为 "false"，视频将在结束播放后停止，默认值是 "false"。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/202507.html
微信扫一扫 