HTML5实现video标签的皮肤自定义
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.
实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!
HTML5 Video
基础标签
<video id="myVideo" controls poster="video.jpg" width="600" height="400" > <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webM" /> <source src="video.ogv" type="video/ogg" /> <p>Your browser does not support the video tag.</p> </video>
幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.
在编码之前让我简单的介绍一下jQuery是如何获取video标签的.
在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$("videoID")会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.
//return a DOM object var video = document.getElementById('videoID'); //or var video = $('#videoID').get(0); //or var video = $('#videoID')[0]; //return a jQuery object var video = $('#videoID');
Video Play/Pause Controls 播放/暂停 按钮
好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.
<div class="control"> <a href="#" class="btnPlay">Play/Pause</a> </div>
我们可以轻松的控制Html5 Video的播放与暂停状态.
//Play/Pause control clicked $('.btnPlay').on('click', function() { if(video[0].paused) { video[0].play(); } else { video[0].pause(); } return false; };
显示视频播放时间和持续时间
Html5 Video支持视频回放.这里我们要显示视频的当前播放时间和总时间.
<div class="progressTime"> Current play time: <span class="current"></span> Video duration: <span class="duration"></span> </div>
为了得到视频的总时间,我们要确保视频元数据已经加载.这个时候我们要用到Html5 Video的loadedmetadata事件.
对于当前的视频播放时间.我们可以用Html5 Video timeupdate事件来保证他的更新.
//get HTML5 video time duration video.on('loadedmetadata', function() { $('.duration').text(video[0].duration); }); //update HTML5 video current play time video.on('timeupdate', function() { $('.current').text(video[0].currentTime); });
视频进度条
在这里我们将会把当前播放时间和总的时间长度转换为更人性化的进度条.
<style> .progressBar { position: relative; width: 100%; height: height:10px; backgroud-color: #000; } .timeBar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #ccc; } </style> <div class="progressBar"> <div class="timeBar"></div> </div>
下面的js就是通过视频的总时间与当前时间的计算,获得播放进度条。
//get HTML5 video time duration video.on('loadedmetadata', function() { $('.duration').text(video[0].duration)); }); //update HTML5 video current play time video.on('timeupdate', function() { var currentPos = video[0].currentTime; //Get currenttime var maxduration = video[0].duration; //Get video duration var percentage = 100 * currentPos / maxduration; //in % $('.timeBar').css('width', percentage+'%'); });
下面实现播放进度条的拖拽,来播放视频
var timeDrag = false; /* Drag status */ $('.progressBar').mousedown(function(e) { timeDrag = true; updatebar(e.pageX); }); $(document).mouseup(function(e) { if(timeDrag) { timeDrag = false; updatebar(e.pageX); } }); $(document).mousemove(function(e) { if(timeDrag) { updatebar(e.pageX); } }); //update Progress Bar control var updatebar = function(x) { var progress = $('.progressBar'); var maxduration = video[0].duration; //Video duraiton var position = x - progress.offset().left; //Click pos var percentage = 100 * position / progress.width(); //Check within range if(percentage > 100) { percentage = 100; } if(percentage < 0) { percentage = 0; } //Update progress bar and video currenttime $('.timeBar').css('width', percentage+'%'); video[0].currentTime = maxduration * percentage / 100; };
进阶-显示缓冲栏
我们需要给视频制作一个缓冲栏让用户知道视频加载了多少.
<style> .progressBar { position: relative; width: 100%; height: height:10px; backgroud-color: #000; } .bufferBar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #ccc; } </style> <div class="progressBar"> <div class="bufferBar"></div> </div>
Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.
//loop to get HTML5 video buffered data var startBuffer = function() { var maxduration = video[0].duration; var currentBuffer = video[0].buffered.end(0); var percentage = 100 * currentBuffer / maxduration; $('.bufferBar').css('width', percentage+'%'); if(currentBuffer < maxduration) { setTimeout(startBuffer, 500); } }; setTimeout(startBuffer, 500);
音量控制
现在,我们要增加声音控制.有两种不同的音量控制方法.静音按钮/音量栏
<a href="#" class="muted" >Mute/Unmute</a> <div class="volumeBar"> <div class="volume"></div> </div>
js:
//Mute/Unmute control clicked $('.muted').click(function() { video[0].muted = !video[0].muted; return false; }); //Volume control clicked $('.volumeBar').on('mousedown', function(e) { var position = e.pageX - volume.offset().left; var percentage = 100 * position / volume.width(); $('.volumeBar').css('width', percentage+'%'); video[0].volume = percentage / 100; });
快进/快退 倒带控制
Html5 Video支持播放速度的改变.我们可以使用playbackrate属性来控制.
<div class="control"> <a href="#" class="ff">Fast Forward</a> <a href="#" class="rw">Rewind</a> <a href="#" class="sl">Slow Motion</a> </div>
不幸的是FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.
/Fast forward control $('.ff').on('click', function() { video[0].playbackrate = 3; return false; }); //Rewind control $('.rw').on('click', function() { video[0].playbackrate = -3; return false; }); //Slow motion control $('.sl').on('click', function() { video[0].playbackrate = 0.5; return false; });
其他
除了主要的控制插件.还可以做一些额外的控制.例如全屏播放
$('.fullscreen').on('click', function() { //For Webkit video[0].webkitEnterFullscreen(); //For Firefox video[0].mozRequestFullScreen(); return false; });
开灯关灯控制
$('.btnLight').click(function() { if($(this).hasClass('on')) { $(this).removeClass('on'); $('body').append('<div class="overlay"></div>'); $('.overlay').css({ 'position':'absolute', 'width':100+'%', 'height':$(document).height(), 'background':'#000', 'opacity':0.9, 'top':0, 'left':0, 'z-index':999 }); $('#myVideo').css({ 'z-index':1000 }); } else { $(this).addClass('on'); $('.overlay').remove(); } return false; });
原文地址:https://www.cnblogs.com/fengluzheweb/p/11719073.html
- MySQL Online DDL(二)(r11笔记第88天)
- 转-Android上面运行golang
- Golang适合高并发场景的原因分析
- 浅谈MySQL中的事务隔离级别(r11笔记第86天)
- 巧用echo命令解决Samba批量添加用户难题
- 分分钟搭建MySQL Group Replication测试环境(r11笔记第82天)
- MySQL 5.7 Group Replication错误总结(r11笔记第84天)
- 空结构体struct{}解析
- 动态创建MySQL Group Replication的节点(r11笔记第84天)
- sysbench压测小记(r11笔记第99天)
- WordPress启用memcached动态缓存以及报错解决
- 升级CentOS6.5内核,开启Nginx的fastopen和reuseport特性
- Nginx网站使用CDN之后禁止用户真实IP访问的方法
- 相差数十倍的SQL性能分析(r11笔记第98天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- C++中sort函数使用方法
- 史上最贴心React渲染器开发辅导
- 010.Nginx正反代理
- ClickHouse源码笔记2:聚合流程的实现
- 5G边缘计算赋能安防互联网直播行业,青犀视频强力打造云、边、端一体化协同音视频解决方案
- 视频云平台流媒体服务EasyNVR能获取直播视频的RTSP流地址吗?
- 如何编写不存在即插入的 SQL
- SQL 打印一个月的日历
- Kubernetes节点的驱逐与预留
- 使用reveal.js制作精美的网页版PPT
- Ceph快照爱你不容易系列 03:快照数据一致性浅析
- 没想到竟是因为它!让我的服务器变成了别人的挖矿工具
- 从零到一,Serverless 平台在滴滴内部落地
- React 使用 Proxy 代理(create-react-app)
- .Net Core + EF + mysql 从数据库生成实体