涩情网站大全,lxvs-001,天妖皇
video控制栏功能
1.volume 声音
2.currenttime 视频进度
3.play/pause 播放/暂停
4.fullscreen 全屏
5.download (chrome下显示)
一般情况下重写控制栏的目的:
1.样式上的优化,
2.去除chrome的下载按钮
假设现在获取到一个video elment 对象 video
如何实现上述功能:
1.声音 video.volume 设置或返回视频音量
2.进度 video.currenttime 设置或返回视频中的当前播放位置(以秒计)
3.播放 video.pause 返回是否暂停 ,play() pause() 暂停播放操作
4.全屏 requestfullscreen/exitfullscreen 全屏以及退出全屏
问题:
当video全屏的时候是会强制展示默认的控制条
解决方案 :
给video标签套一层p ,让video的父标签全屏而video占满父标签即可.
让我们来看一下全屏的代码:
我要评论
//dom 表示element 对象
function tofullscreen(dom){
if(dom.requestfullscreen){
return dom.requestfullscreen();
}else if(dom.webkitrequestfullscreen){
return dom.webkitrequestfullscreen();
}else if(dom.mozrequestfullscreen){
return dom.mozrequestfullscreen();
}else{
return dom.msrequestfullscreen();
}
}
//稍微改造一下,就变成了一个通用的方法,相对于上面方法而言,不会多次执行if else
var tofullscreen= (function(){
var full = element.prototype.requestfullscreen ||
element.prototype.webkitrequestfullscreen||
element.prototype.mozrequestfullscreen||
element.prototype.msrequestfullscreen;
return function(dom){
full.call(dom)
}
})()
退出全屏的代码
var exitfullscreen = (function(){
var full = document.exitfullscreen||
document.mozexitfullscreen||
document.webkitexitfullscreen;
return function(){
full.call(document);
}
})()
监听全屏事件 fullscreenchange
判断是否全屏 就不一一赘述了.
然后控制栏的样式编写,就是纯粹的css布局问题了.
1.不要给video 标签添加 controls 属性. controls 和required 属性一样,只需要写了就会生效,而不在乎属性值.
2.用fullscreen和exitfullscreen 控制video的父标签全屏,同时设置video css 样式width,height 100% ,属性值video.width video.height不设置即可.这样父标签全屏,video自动全屏,且不会有控制条,然后再手动添加一个控制条,加上对应事件即可
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论