1. Dotnet9首页
  2. 更多分享
  3. 最佳实践
  4. 技术分享

利用h5标签video来播放视频

10

电脑端和手机端都可以用: //webm视频格式是稳定支持的,格式工厂提前转码

标签:<video id=”player” controls=”true” preload=”auto” loop=”loop” style=”margin-left:9px”/>
设置好标签还要初始化一下视频屏幕大小,可以参考:

js获取手机屏幕宽度、高度
网页可见区域宽:document.body.clientWidth 
网页可见区域高:document.body.clientHeight 
网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
网页可见区域高:document.body.offsetHeight (包括边线的宽) 
网页正文全文宽:document.body.scrollWidth 
网页正文全文高:document.body.scrollHeight 
网页被卷去的高:document.body.scrollTop 
网页被卷去的左:document.body.scrollLeft 
网页正文部分上:window.screenTop 
网页正文部分左:window.screenLeft 
屏幕分辨率的高:window.screen.height 
屏幕分辨率的宽:window.screen.width 
屏幕可用工作区高度:window.screen.availHeight 
屏幕可用工作区宽度:window.screen.availWidth 

调用代码:function videoPlay(videoUrl,coverImgUrl){
     var player=document.getElementById(“player”);
     player.setAttribute(“height”, $(window).height()+””);
     player.setAttribute(“width”, $(window).height()/9*16+””);
     player.setAttribute(“poster”, coverImgUrl+””);
     player.setAttribute(“volume”, “0.5”);
     player.setAttribute(“src”, videoUrl+””);
    //player.play();player.pause();//播放和暂停}
获取实时播放进度:
    function getVideoprogress() {
    setTimeout(function () {
    var vid = document.getElementById(“player”);
    var currentTime=vid.currentTime.toFixed(1);
    if(currentTime==1200){
    // 触发
    return false;
    }
    console.log(currentTime);
    getVideoProgress();
    }, 50);
    }
视频加载之后先获取总时长,要用到video的一个事件-loadedmetadata,这个事件的触发表示元数据(媒体的一些基本信息)已经加载完成。
用addEventListener监听事件:
var myVideo = document.getElementById(‘player’);// 获取video元素
    var tol = 0;
    myVideo.addEventListener(“loadedmetadata”, function() {
        tol = myVideo.duration;//获取总时长
        console.log(“总时长:”+tol);
    });
设置断点续播:需要监听一个事件和获取一个属性的值,那么用到的是video的timeupdate事件和currentTime属性
//播放时间点更新时
myVideo.addEventListener(“timeupdate”, function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});
//设置播放点,续播
function playBySeconds(num){ 
    myVideo.currentTime = num;
}
//音量改变时
myVideo.addEventListener(“volumechange”, function(){
    var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});
//设置音量
function setVol(num){ 
    myVideo.volume = num;
}
进度控制,禁止随意快进:

    var video = document.getElementById(“player”);
    var last=0;
    //当目前的播放位置已更改时  (禁止随意快进)
    video.ontimeupdate = function () {  
        var current = video.currentTime;  
        if(current – last > 2) {  
            video.currentTime = last;  
        } else {  
        last = current;  
        }  
    }; 

原文出处:CSDN【10追光者】

原文链接:https://blog.csdn.net/u012310865/article/details/80577379

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论