HTML的网页视频播放器是一种以HTML技术为基础的视频播放器,它可以在网页上直接播放视频,而无需使用Flash等第三方插件。HTML的网页视频播放器使用起来非常简单,只需要在网页上添加一些简单的代码即可完成播放器的嵌入。下面是一些常用的HTML网页视频播放器代码。
. 使用video标签嵌入视频
使用video标签可以非常简单地嵌入视频,只需要在网页上添加以下代码即可:
<video src="video.mp" controls></video>
其中,src属性指定视频文件的路径,controls属性表示显示播放器控制条。
. 使用source标签指定多种格式的视频文件
为了兼容不同的浏览器和设备,可以使用source标签指定多种格式的视频文件。以下是一个例子:
<video controls>
<source src="video.mp" type="video/mp">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
其中,type属性指定视频文件的MIME类型,这样浏览器就可以根据自己的支持情况选择最合适的格式进行播放。
. 自定义播放器样式
可以通过CSS来自定义播放器的样式,以下是一个例子:
<style>
video {
width: 00%;
height: auto;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
background-color: ;
color: fff;
padding: 0px;
}
.play-pause {
font-size: 16px;
cursor: pointer;
}
.progress {
width: 00%;
height: 0px;
background-color: ddd;
position: relative;
margin-top: 0px;
}
.progress-bar {
width: 0%;
height: 00%;
background-color: f00;
position: absolute;
top: 0;
left: 0;
}
</style>
其中,video选择器指定播放器的样式,.controls选择器指定控制条的样式,.play-pause选择器指定播放/暂停按钮的样式,.progress选择器指定进度条的样式,.progress-bar选择器指定进度条的进度样式。
. 使用JavaScript控制播放器
可以使用JavaScript来控制播放器的行为,以下是一个例子:
<script>
var video = document.querySelector(&;video&;);
var playPause = document.querySelector(&;.play-pause&;);
var progressBar = document.querySelector(&;.progress-bar&;);
playPause.addEventListener(&;click&;, function() {
if (video.paused) {
video.play();
playPause.textContent = &;暂停&;;
} else {
video.pause();
playPause.textContent = &;播放&;;
}
});
video.addEventListener(&;timeupdate&;, function() {
var progress = video.currentTime / video.duration;
progressBar.style.width = progress 00 + &;%&;;
});
</script>
其中,document.querySelector()方法用于获取DOM元素,addEventListener()方法用于添加事件监听器,video.paused属性表示视频是否暂停,video.play()方法用于播放视频,video.pause()方法用于暂停视频,video.currentTime属性表示当前播放时间,video.duration属性表示视频总时长,progressBar.style.width属性用于设置进度条的宽度。