html 5视频播放控制代码
导读:HTML 5是一种现代化的标记语言,它具有许多新功能,其中包括嵌入视频的功能。在HTML 5中,我们可以通过使用video标签来插入视频。以下是一些常见的HTML 5视频播放控制代码:// 创建一个视频元素var videoElement...
HTML 5是一种现代化的标记语言,它具有许多新功能,其中包括嵌入视频的功能。在HTML 5中,我们可以通过使用video标签来插入视频。以下是一些常见的HTML 5视频播放控制代码:
// 创建一个视频元素var videoElement = document.createElement("video");
// 设置视频的源文件videoElement.src = "video.mp4";
// 设置视频的自动播放功能videoElement.autoplay = true;
// 设置视频的宽度和高度videoElement.width = 640;
videoElement.height = 360;
// 创建一个控制条并将其添加到视频元素上var controlBar = document.createElement("div");
videoElement.appendChild(controlBar);
// 增加播放/暂停按钮var playButton = document.createElement("button");
playButton.textContent = "播放";
playButton.onclick = function() {
if (videoElement.paused) {
videoElement.play();
playButton.textContent = "暂停";
}
else {
videoElement.pause();
playButton.textContent = "播放";
}
}
;
controlBar.appendChild(playButton);
// 增加音量控件var volumeControl = document.createElement("input");
volumeControl.type = "range";
volumeControl.min = 0;
volumeControl.max = 1;
volumeControl.step = 0.1;
volumeControl.value = videoElement.volume;
volumeControl.oninput = function() {
videoElement.volume = volumeControl.value;
}
;
controlBar.appendChild(volumeControl);
// 增加进度条var progress = document.createElement("progress");
progress.value = 0;
progress.max = videoElement.duration;
videoElement.ontimeupdate = function() {
progress.value = videoElement.currentTime;
}
;
controlBar.appendChild(progress);
以上是一些基本的HTML 5视频播放控制代码,可以通过它们实现视频的自动播放、暂停、音量控制和进度条显示等功能,可以根据自己的需求进行修改和扩展。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html 5视频播放控制代码
本文地址: https://pptw.com/jishu/302105.html
