热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

自定义video样式

和朋友聊天说到了video自定义样式问题,今天抽空简单试验了一下,下面贴上代码。dom结构如下:js代码如下:实现效果如下:如有表述不准确之处,欢迎指正,欢迎补

和朋友聊天说到了video自定义样式问题,今天抽空简单试验了一下,下面贴上代码。

dom结构如下:

<video id="video1" width="399" height="300" poster="video_bg.jpg">
<source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4" />
video>
<div id="isPlay" class="stop">div>
<div id="current">div>
<div id="buffered">div>
<div id="duration">div>
<div id="fullScreen">全屏div>
<div id="progress">
<div id="bar">div>
<div id="buffer">div>
div>

js代码如下:

var isPlay = document.getElementById(‘isPlay‘);
var video1 = document.getElementById(‘video1‘);
var current = document.getElementById(‘current‘);
var buffered = document.getElementById(‘buffered‘);
var duration = document.getElementById(‘duration‘);
var fullScreen = document.getElementById(‘fullScreen‘);
var progress = document.getElementById(‘progress‘);
var bar = document.getElementById(‘bar‘);
var buffer = document.getElementById(‘buffer‘);
// 补零
function zeroFill(num){
if (num<10) {
num
= "0" +num;
}
return num;
};
// 处理秒数为时分秒 h:m:s
function getTime(num){
var m = zeroFill(Math.floor(num/60)),remainder = zeroFill(Math.floor(num%60)),h = zeroFill(Math.floor(m/60)),time = ‘‘+h+‘:‘+m+‘:‘+remainder+‘‘;
return time;
};
//全屏方法
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
// 播放暂停点击方法
isPlay.Onclick=function(){
if(isPlay.className==‘stop‘){
video1.play();
bufferTimer
= setInterval(function(){
buffer.style.width
= video1.buffered.end(0)/video1.duration*100+"%";
},1000/30);
if(video1.buffered.end(0) == video1.duration){
buffer.style.width
= "100%";
clearInterval(bufferTimer);
}
timer
= setInterval(function(){
bar.style.width
= video1.currentTime/video1.duration*100+"%";
},1000/30)
isPlay.className="play";
}
else if(isPlay.className==‘play‘){
video1.pause();
clearInterval(timer);
isPlay.className
="stop";
}
};
// 当视频播放位置已经改变
video1.Ontimeupdate= function(){
current.innerHTML
= getTime(this.currentTime);
duration.innerHTML
= getTime(this.duration);
buffered.innerHTML
= this.buffered.end(0);
if(this.currentTime == this.duration){
isPlay.className
="stop";
}
};
// 进度条点击方法
progress.Onclick= function(e){
var barLength = e.pageX - progress.offsetLeft;
video1.currentTime
= barLength/progress.clientWidth*video1.duration;
bar.style.width = barLength/progress.clientWidth*100+"%";

};
// 全屏按钮点击方法
fullScreen.Onclick= function(){
launchFullScreen(video1);
};

实现效果如下:

技术分享图片

技术分享图片

如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。


推荐阅读
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文介绍了如何利用Java中的URLConnection类来实现基本的网络爬虫功能,包括向目标网站发送请求、接收HTML响应、解析HTML以提取所需信息,并处理可能存在的递归爬取需求。 ... [详细]
  • 本文介绍了如何使用JFreeChart库创建一个美观且功能丰富的环形图。通过设置主题、字体和颜色等属性,可以生成符合特定需求的图表。 ... [详细]
  • Google排名优化-面向Google(Search Engine Friendly)的URL设计 ... [详细]
  • Servlet过滤器入门:实现与配置
    本文介绍如何在Java Web应用中实现和配置Servlet过滤器,通过实现`javax.servlet.Filter`接口来创建过滤器,并详细说明其在web.xml文件中的配置方法。 ... [详细]
  • 本文详细探讨了在微服务架构中,使用Feign进行远程调用时出现的请求头丢失问题,并提供了具体的解决方案。重点讨论了单线程和异步调用两种场景下的处理方法。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • 深入解析BookKeeper的设计与应用场景
    本文介绍了由Yahoo在2009年开发并于2011年开源的BookKeeper技术。BookKeeper是一种高效且可靠的日志流存储解决方案,广泛应用于需要高性能和强数据持久性的场景。 ... [详细]
  • 深入理解动态链接库及其应用
    本文将探讨动态链接库的基本概念,包括Windows下的动态链接库(DLL)和Linux下的共享库(Shared Library),并详细介绍如何在Linux环境中创建和使用这些库。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 本文详细介绍了Java集合框架中的Collection体系,包括集合的基本概念及其与数组的区别。同时,深入探讨了Comparable和Comparator接口的区别,并分析了各种集合类的底层数据结构。最后,提供了如何根据需求选择合适的集合类的指导。 ... [详细]
  • 本文介绍了如何通过ARM编译器组件重定向标准C运行时库的I/O函数,以适应不同的硬件平台。原文链接:https://www.keil.com/pack/doc/compiler/RetargetIO/html/retarget_overview.html ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
  • Ubuntu GamePack:专为游戏爱好者打造的Linux发行版
    随着Linux系统在游戏领域的应用越来越广泛,许多Linux用户开始寻求在自己的系统上畅玩游戏的方法。UALinux,一家致力于推广GNU/Linux使用的乌克兰公司,推出了基于Ubuntu 16.04的Ubuntu GamePack,旨在为Linux用户提供一个游戏友好型的操作环境。 ... [详细]
author-avatar
反反复复-念念不忘
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有