本篇文章给大家分享的是有关video中怎么设置播放时间点,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
在龙泉等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、网站制作 网站设计制作按需制作,公司网站建设,企业网站建设,高端网站设计,成都营销网站建设,外贸营销网站建设,龙泉网站建设费用合理。
1、video标签常用属性 下面shareVideoLink为视频连接地址
2、获取视频播放时长,初始化在mounted执行此方法,当视屏开始播放的时候,可以获取到视频播放的实时时间点
/** * 获取视频播放时长*/getVideoTime () { if (document.getElementById ('videoPlayer')) { let videoPlayer = document.getElementById ('videoPlayer'); videoPlayer.addEventListener('timeupdate', function () { console.log(`当前的时间点是${videoPlayer.currentTime},视频长度是${videoPlayer.duration}`); }, false) }}
3、设置视频从某个具体时间点开始播放,下面方法中参数num表示要从什么时间点开始播放视频,比如:点击一个按钮去执行下面方法:
比如后台返回了2460198为毫秒 只需要转换为秒就好了,video会从秒自动计算,赋值给video标签秒就好,2460198就是246.0198秒(s) 这时候我们调用下面方法就可以这么写:
this.playBySeconds(2460198/1000) 或者this.playBySeconds(2460.198) ,因为2460.198秒是41.0033001分,所以视频会自动从41.0033001分开始播放,就OK了
//设置播放点,续播playBySeconds (num) { if (num && document.getElementById ('videoPlayer')) { let myVideo = document.getElementById ('videoPlayer'); myVideo.play (); myVideo.currentTime = num; }},
video其他属性总结:
var video = document.getElementById("video");
function play(){
video.play();
}
function pause(){
video.pause();
}
function load(){
video.src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";
video.load();
}
function open_voice(){
video.muted = false;
}
function close_voice(){
video.muted = true;
}
video.addEventListener("play", function(){
console.log("视频播放")
});
video.addEventListener("pause", function(){
console.log("视频暂停")
});
video.addEventListener("ended", function(){
console.log("播放结束")
});
video.addEventListener("volumechange", function(e){
if(video.muted){
console.log("你关闭了声音")
else{
console.log("你打开了声音")
}
});
以上就是video中怎么设置播放时间点,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。