前言

随着网络时代的到来，人们的生活也是相当便利，例如：当我们点击一个视频时，视频就会开始播放。在这个例子中，有没有大胆想过我们常用的播放，暂停，音量控制，进度条等等，这些功能我们自己来实现呢？如果你有这个想法，那么我的这篇文章就可以帮您实现。

静态样式实现

标签部分：

    <div id="father"><video src="birds.mp4" volume="0.5" currentTime></video><div class="jdt"><div class="div1"></div><div class="div2"></div><div class="div3">00:00/00:00</div><div id="ran"><div></div><i></i></div><div class="div4"></div><div class="sy"><i></i></div><div class="div5"></div></div></div>

样式部分：

#father {position: relative;width: 885px;height: 480px;transition: all 3s linear;}.div1 {position: absolute;width: 40px;height: 40px;background-image: url("播放_wps图片.png");background-position: center;background-size: 40px 40px;top: 8px;left: 30px;}.div2 {position: absolute;width: 450px;height: 250px;/* background-image: url("gg.jpeg"); */background-position: center;background-size: 450px 250px;top: -345px;left: 225px;}.div3 {position: absolute;width: 100px;height: 30px;left: 95px;top: 20px;font-size: 16px;}.div4 {position: absolute;width: 30px;height: 30px;background-image: url("声音.png");background-position: center;background-size: 30px 30px;top: 10px;right: 290px;}.sy {position: absolute;width: 100px;height: 2px;top: 25px;left: 563px;background-color: cornflowerblue;}.sy>i {position: absolute;width: 10px;height: 10px;left: 0px;top: -4px;background-color: snow;border-radius: 10px;}.div5 {position: absolute;width: 50px;height: 50px;background-image: url("放大.png");background-position: center;background-size: 50px 50px;top: 2px;right: 30px;}#ran {position: absolute;width: 856px;height: 2px;top: 0px;left: 0px;background-color: cornflowerblue;}#ran>i {position: absolute;width: 10px;height: 10px;left: 0px;top: -4px;background-color: snow;border-radius: 10px;}.jdt {position: absolute;width: 855px;height: 50px;left: 0px;top: 430px;background-color: rgba(0, 0, 0, 0.5);display: none}video {position: absolute;width: 855px;height: 480px;}

实现之后的页面是这样的：

完成这些之后，我们就得加强真实度：
1.当鼠标触碰进度条的时候进度条放大，进度条计时点放大

2.当鼠标接触声音控件的时候，音量计时点放大

实现代码为：

        .sy:hover i {height: 15px;width: 15px;top: -7px;}#ran:hover {height: 5px;top: -2px;}#ran:hover>div {height: 5px;}#ran:hover>i {height: 15px;width: 15px;}#father:hover .jdt {display: block;}

js的dom元素获取

        var playvid;var bf = document.getElementsByClassName("div1")[0];var gg = document.getElementsByClassName("div2")[0];var tim = document.getElementsByClassName("div3")[0];var sybt = document.getElementsByClassName("div4")[0];var vid = document.getElementsByTagName("video")[0];var jd = document.getElementById("ran");var sy = document.getElementsByClassName("sy")[0];var num = 60;

播放、暂停功能

第一次点击时播放，播放控件图标变为暂停，第二次点击时暂停，播放控件图标变为播放

        bf.addEventListener("click", function () {if (playvid == true) {vid.play();playvid = false;bf.style.backgroundImage = "url(暂停.png)"} else {vid.pause();bf.style.backgroundImage = " url(播放_wps图片.png)"playvid = true;}})

暂停时弹出广告

        vid.onplay = function () {gg.style.display = "none";}vid.onpause = function () {gg.style.display = "block";}

进度条功能

 var timer = setInterval(function () {// 获取视频的总时长 播放的时间var total = vid.duration;var nowTime = vid.currentTime;// 获取进度条总宽度  20/60 * 总宽度// 当前播放节点  20// 总时长  60var owidth = nowTime / total * jd.clientWidth;// 改变进度条的位置jd.children[0].style.width = owidth + 'px';jd.children[1].style.left = owidth + 'px';}, 30);

计时功能实现

                // 将时间设置到页面if (parseInt(nowTime % 60) < 10) {tim.innerHTML = parseInt(nowTime / 60) + ":" + "0" + parseInt(nowTime % 60) + "/" + "0" + parseInt(total / 60) + ":" + parseInt(total % 60) + "0"} else if (parseInt(nowTime % 60) >= 10 && parseInt(nowTime % 60) <= 60) {tim.innerHTML = parseInt(nowTime / 60) + ":" + parseInt(nowTime % 60) + "/" + "0" + parseInt(total / 60) + ":" + parseInt(total % 60) + "0"}

声音控件

        sy.children[0].style.left = num + "px"vid.volume = num / sy.clientWidth;sy.onclick = function (e) {if (e.offsetX >= 0) {sy.children[0].style.left = e.offsetX + 'px';vid.volume = e.offsetX / sy.clientWidth;console.log(e.offsetX / sy.clientWidth)if(e.offsetX / sy.clientWidth==0||e.offsetX / sy.clientWidth==0.01) {sybt.style.backgroundImage="url(禁音.png)"}else{sybt.style.backgroundImage="url(声音.png)"}}

总结

本文主要根据本人测试视频编写，不同浏览器打开不同视频的显示效果不同，本文主要提供学习使用。

使用HTML5自制视频控件相关推荐

html 关闭js控件,javascript – 用JS关闭html5视频控件
我有一个问题, html5视频控件捕获在iOS上发生的任何动作,这干扰了我需要在视频上显示的模态窗口. 我正在尝试自定义模态本身,但似乎无法使其工作.基本上,当模态打开时,我需要做: var vide ...
浅谈ASP.NET 4中构造“.NET研究”HTML5视频控件
在本文中,将一步步地指导你如何使用Visual Studio 2010和ASP.NET 4的相关知识,打造一个基于HTML5标准规范的视频播放控件,其中你会学习到一些关于HTML 5的知识,还会学到如 ...
html文件显示controls,html5中设置或返回浏览器应当显示标准的音视频控件的属性controls...
实例为视频启动控件:myVid=document.getElementById("video1"); myVid.controls=true; 定义和用法 controls 属性 ...
编程小问题系列（2）——为什么WPF里MediaElement等视频控件不起作用
为什么WPF里MediaElement等视频控件不起作用? 非常可能的原因是因为没有安装Microsoft Windows Media Player 10或者10以上的播放器,MSDN文档里就写有下 ...
可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK...
LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...
NVisionXR_iOS教程十 —— 加载视频控件
因为在下一章节我们需要和大家介绍多场景切换功能,所以在本章我们创建一个新的场景,如下图重写NVScenePlay的生命周期 1.引用头文件#import ''NVVideoWidget.h'' ...
xamarin Formvideolibrary视频控件使用问题
平板系统版本Android5.1. app功能:循环播放视频,同时将其他操作性功能浮在上面,可进行操作. 使用的是xamarin官方的formvideolibrary控件来播放视频. 陆续碰到一些问题 ...
android播放视频控件,视频播放控件VideoView的基本使用
在Android的界面控件中有一个视频播放控件,可以直接在手机上面开辟一个视频播放的UI,播放视频,下面ATAAW.COM大概介绍下视频控件VideoView的使用,由于视频播放是属于Android多 ...
html5网页中加入播放器,向网页中添加 HTML5 视频控件
爱学习,爱生活,爱编程--希望能帮到你!更多>>> 如何开始使用采用它的最基本形式,使用 HTML5 video 元素向网页中添加视频播放器是通过一行 HTML 完成的. 添加 ...

使用HTML5自制视频控件