ZVVQ代理分享网

常用的HTML5网页视频播放器代码有哪些?

作者:zvvq博客网
导读其中,src属性指定视频文件的路径,controls属性表示显示播放器控制条。

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属性用于设置进度条的宽度。