h5+js实现视频播放视频播放器控件的弄
由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器。
只插入一个视频时,浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件;
下面是一个自制播放控件的小练习,比较粗糙,很多功能有待完善。
制作中可能用到的一些常见属性和内容:
1、标签<video></video>
2、常用属性:
autoplay--自动播放;
controls--显示音乐控件;
loop--实现循环播放;
poster--视频加载未开始时播放的图片;
3、video支持多视频格式:(以此解决不同浏览器对视频格式的兼容问题)
<video poster="img/oceans-clip.png">
<source src="https://www.swvq.com/video/oceans-clip.mp4"></source>
<source src="https://www.swvq.com/video/oceans-clip.webm"></source>
<source src="https://www.swvq.com/video/oceans-clip.ogv"></source>
</video>
4、获取当前视频播放的状态:
playbtn(对象).onclick=function(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
5、视频的一些特殊事件:
1)当视频可以播放获取总时间:
vdideo.oncanplay=function(){
console.log(video.duration);
}
2)视频播放时,获取实时时间:
video.ontimedate=function(){
console.log(video.currentTime);
}
3)视频结束:
video.onended=function(){
}
实现后的样式:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频</title>
<style type="text/css">
input,body,div{
margin: 0;
padding: 0;
}
input{
display: inline-block;
width: 30px;
height: 30px;
background-size: 30px;
float: left;
}
#control{
width: 620px;
height: 30px;
background-color: #222;
margin-top: -8px;
padding: 5px 10px;
clear: both;
/*position: absolute;
top:300px
left: 100px;*/
}
#jdt{
margin: 10px 5px 0 5px;
width: 400px;
height: 10px;
float: left;
}
span {
display: inline-block;
color: #fff;
float: left;
margin: 6px 5px 0 5px;
font: 14px "微软雅黑";
}
#box1{
margin:50px auto;
width: 615px;
height: 305pc;
/*position: relative;*/
}
#playbnt{
}
</style>
</head>
<body>
<div id="box1">
<video poster="img/oceans-clip.png">
<source src="https://www.swvq.com/video/oceans-clip.mp4"></source>
<source src="https://www.swvq.com/video/oceans-clip.webm"></source>
<source src="https://www.swvq.com/video/oceans-clip.ogv"></source>
</video>
<div id="control">
<input type="image" value="" src="https://www.swvq.com/img/on.png"/>
<meter min="0" max="100"></meter>
<span id="timeone">00:00:00</span>
<span>/</span>
<span id="timeall">00:00:00</span>
<input type="image" value="" src="https://www.swvq.com/img/expand.jpg"/>
</div>
</div>
<script type="text/javascript">
var playbnt=document.getElementById("playbnt");
var fullbnt=document.getElementById("fullbnt");
var video=document.querySelector("video");
var box1=document.getElementById("box1");
//播放按钮
playbnt.onclick=function(){
if(video.paused){
video.play();
playbnt.src="https://www.swvq.com/img/pause.png";
}else{
video.pause();
playbnt.src="https://www.swvq.com/img/on.png";
}
}
//点击进入全屏(注意兼容)
fullbnt.onclick=function(){
if(document.fullscreenElement||document.webkitFullscreenElement||document.mozCancelFullScreen||document.msFullscreenElement){
if(document.cancelFullscreen){
document.cancelFullscreen();
}else if(document.webkitCancelFullscreen){
document.webkitCancelFullscreen();
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}else if(document.msExitFullscreen){
document.msExitFullscreen();
}
}else{
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.msRequestFullscreen){
video.msRequestFullscreen();
}
}
}
//实时获取时间
var timh=0;
var timm=0;
var tims=0;
var all=null;
var one=null;
var timeone=document.getElementById("timeone");
var jdt=document.getElementById("jdt");
video.ontimeupdate=function(){
var t=Math.floor(video.currentTime);
ont=t;
timh=t/3600;
timm=t600/60;
tims=t`;
// console.log(t);
if(t<10){
timeone.innerHTML="00:00:0" tims;
}else if(10<t<60){
timeone.innerHTML="00:00:" tims;
}else if(60<t<600){
timeone.innerHTML="00:0" timm ":" tims;
}
else if(600<t<3600){
timeone.innerHTML="00:" timm ":" tims;
}else if(3600<t<36000){
timeone.innerHTML="0" timh ":" timm ":" tims;
}else if(t>36000){
timeone.innerHTML=timh ":" timm ":" tims;
}
jdt.value=(t/all)*100;
}
//获取总时间
video.oncanplay=function(){
var t=Math.floor(video.duration);
all=t
timh=t/3600;
timm=t600/60;
tims=t`;
// console.log(t);
if(t<10){
timeall.innerHTML="00:00:0" tims;
}else if(10<t<60){
timeall.innerHTML="00:00:" tims;
}else if(60<t<600){
timeall.innerHTML="00:0" timm ":" tims;
}
else if(600<t<3600){
timeall.innerHTML="00:" timm ":" tims;
}else if(3600<t<36000){
timeall.innerHTML="0" timh ":" timm ":" tims;
}else if(t>36000){
timeall.innerHTML=timh ":" timm ":" tims;
}
}
//视频结束时进度条
video.onended=function(){
playbnt.src="https://www.swvq.com/img/on.png";
timeone.innerHTML="00:00:00";
video.currentTime=0;
}
//单击进度条
var jdtl=jdt.offsetLeft;
var jdtw=jdt.offsetWidth;
jdt.onclick=function(event){
// console.log(all);
var onex=Math.floor((event.clientX-jdtl));//点击坐标到进度条左端距离
console.log("鼠标单击坐标:" event.clientX);
// console.log(jdtl);
var allx=Math.floor(jdtw); //进度条的宽度
var x=onex/allx;
console.log("单击坐标-left=" onex);
console.log("进度条宽度=" allx);//百分比
console.log("百分比=" x);
video.currentTime=Math.floor(all*x); //实时时间=总时长*百分比
console.log("实时时间=" all*x);
}
</script>
</body>
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanffgag
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01