H5的video视频播放标签。基础常用功能实现

最新推荐文章于 2024-01-25 17:24:28 发布

AILIHEIHEI

最新推荐文章于 2024-01-25 17:24:28 发布

阅读量805

点赞数

文章标签： html5 javascript

本文链接：https://blog.youkuaiyun.com/qq_42780323/article/details/106556899

版权

效果如图，有几个小功能；视频自己准备本地视频就好，格式要MP4格式。

完整demo。复制就可运行。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#durationbar{

width: 100%;

height: 5px;

}

#durationbar progress{

width: 100%;

height: 100%;

}

#positionBar{

height:3px;

/* background:#fff; */

}

.media::-webkit-media-controls {

display:none !important;

}

button{

margin-top:5px;

}

</style>

</head>

<body>

<div>

<button id='btn'>切换控件显示</button>

<button id='his'>获取当前观看的进度时间</button>

</div>

<!-- <div id='yt' style="width:100%;height:200px;background:url('./img/2.jpg');background-size: cover;">

我是原图

</div> -->

<p>我在这里放截图</p>

</div>

var oVideo = document.getElementById('media');//获取media对象

var jt=document.getElementById('jt')

//poster：封面图片

var canvas=document.getElementById("can");//创建canvas对象

var ctx=canvas.getContext('2d');

//监听加载

oVideo.addEventListener('loadeddata',function(){

canvas.width=oVideo.width*2;

canvas.height=oVideo.height*2;

canvas.style.width=jt.offsetWidth+"px";

canvas.style.height=oVideo.height+"px";

ctx.scale(2,2);

ctx.drawImage(oVideo,0,0);

console.log(oVideo.width,"1111",jt.offsetWidth)

console.log(oVideo.width,"1111",canvas.toDataURL("image/png"))

})

var btn=document.getElementById('btn');

btn.οnclick=function(){

if(oVideo.className===''){

oVideo.className="media"

}else{

oVideo.className=""

}

var oStart = document.getElementById('start');//开始

var oEnd = document.getElementById('end');//停止

var oPause = document.getElementById('pause');//暂停

var oSpeed = document.getElementById('speed');//加速

// 开始函数

oStart.οnclick=function(){

oVideo.play();

console.log("onclick"==="οnclick","o"==="o","onclick","onclick",typeof "ο","onclick"==="οnclick","onclick"==="οnclick")

}

// 停止函数

oEnd.οnclick=function(){

oVideo.pause();

oVideo.currentTime=0;

}

// 暂停函数

oPause.οnclick=function(){

oVideo.pause();

}

// 加速函数

oSpeed.οnclick=function(){

oVideo.play();

oVideo.playbackRate = 4;//注意这里速度大于4的时候，就没有声音了，声音得不到同步

}

//跳转到1分钟,指定时间，单位秒

document.getElementById('jump').οnclick=function(){

oVideo.currentTime=60;

console.log("视频总时间",oVideo.duration)

}

//获取当前观看的时间

document.getElementById('his').οnclick=function(){

console.log(oVideo.currentTime)

}

// 这个事件是在视频播放中一直执行的事件

oVideo.οntimeupdate=function(){

var oPositionBar = document.getElementById('positionBar');

oPositionBar.value= (oVideo.currentTime/oVideo.duration*100);

}

</script>

</body>

</html>