videoJs添加清晰度切换、倍速设置

最新推荐文章于 2024-07-24 09:08:07 发布

AdeLiuBotian

最新推荐文章于 2024-07-24 09:08:07 发布

阅读量1.2w

点赞数 20

分类专栏： HTML-videoJs 文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_35153373/article/details/112183508

版权

HTML-videoJs 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

首先初始化播放器，

    //videoUrl播放视频地址
    //videoPic 展示图
  var myPlayer = videojs("my-video");
    myPlayer.poster(videoPic);
    myPlayer.src(videoUrl);
    myPlayer.play();
    videojs("my-video").ready(function(){
        var myPlayer = this;
        myPlayer.play();
        //此处为断点播放，传入上次播放时间继续上次的播放
        myPlayer.currentTime( parseFloat(currPosition/1000));
    });
//播放器初始化完毕后添加切换按钮（下面的方法）
addTool();

添加切换清晰度按钮

//防止重复添加-添加一个标识
var addTools = "NO";
function addTool() {
    if(addTools == "NO"){
        $(".vjs-control-bar").append('<button class="vjs-control " id="danmu_send_opt"><select style="-webkit-appearance: none;background-color: silver;border-radius: 0px" onchange="resolutionChange(this.options[this.options.selectedIndex].text)">' +
            '  <option value ="volvo" style="color: white">高清</option>' +
            '  <option value ="saab">流畅</option>' +
            '  <option value="opel" >标清</option>' +
            '</select></button>');
        $(".vjs-control-bar").append('<button class="vjs-control " id="danmu_send_opt"><select style="-webkit-appearance: none;background-color: silver;border-radius: 0px" onchange="rateChange(this.options[this.options.selectedIndex].text)">\n' +
            '  <option value ="volvo">1.0X</option>\n' +
            '  <option value ="saab">1.25X</option>\n' +
            '  <option value="opel">1.5X</option>\n' +
            '  <option value="audi">2.0X</option>\n' +
            '</select></button>');
        addTools = "YES";
    }else{
        console.log("已经添加了")
    }

}

切换清晰度和切换播放速度的具体操作

//切换视频
function resolutionChange(tx){
    var player = videojs("my-video");
    var ctime=videojs("my-video").currentTime();
    // alert("切换清晰度-"+ctime)
    if(tx=="高清"){
        // alert("高清");
        videojs("my-video").src(videoUrl);
    }else if(tx=="标清"){
        // alert("标清");
        videojs("my-video").src(videoUrlNormal);
    }else if(tx=="流畅"){
        // alert("流畅");
        videojs("my-video").src(videoUrlLow );
    }
    player.on('loadedmetadata', function() {
        player.play();            			//自动播放
        player.currentTime( parseFloat(ctime));		    //跳转
    });

}
//切换倍速
function rateChange(tx) {
    var player = videojs("my-video");
    player.ready(function() {
        var _this = this
        //速率
        setTimeout(function() {
            _this.playbackRate( parseFloat(tx));
        },20);
    });
}

个人整理，大神嘴下留情

进来了给个赞再走🙅‍♂️