修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题-白红宇

修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题

阅读量：433 次

发布时间：2019-03-06

本文共 1188 字，大约阅读时间需要 3 分钟。

在项目中实现视频播放并限制未观看部分的快进功能，需要综合运用ckplayer插件的配置和自定义扩展。以下是详细的解决方案：

基本配置

使用ckplayer插件时，设置timeScheduleAdjust属性为5，这样可以在PC端限制点击和拖动，防止未观看的视频部分被播放。配置方法为：

player.changeConfig('config', 'timeScheduleAdjust', 5);

移动端控制栏显示

为了在移动端显示ckplayer风格的控制栏，设置mobileCkControls属性为true：

player.changeConfig('config', 'mobileCkControls', true);

限制全屏播放

由于iOS浏览器默认全屏播放，需通过修改视频标签的属性来限制全屏功能。添加以下属性到视频标签中：

这些属性会限制视频在移动端的全屏播放行为。

拖动控制在全屏播放时生效

在ckplayer.js源码中，监听视频的seek事件，特别是在移动端环境下，确保拖动操作不会播放未观看的内容。添加以下事件处理：

var eventSeeking = function (event) {
    if (document.body.clientWidth < 768) { // 移动端检测
        // 内部逻辑，确保拖动时不播放超出范围
        thisTemp.sendJS('seek', 'start');
    }
};

这样即使在全屏播放时，也能限制未观看部分的拖动。

限制左右键快进

在checkSlideLeft函数中，添加逻辑确保右键和左键操作无法跳过未观看部分。修改函数内部处理：

case 5:
    // 检查并限制滑块位置，避免快进
    if (!this.timeSliderLeftTemp) {
        this.timeSliderLeftTemp = sliderLeft / refer;
    } else {
        var timeSliderMax = sliderLeft / refer;
        if (timeSliderMax > this.timeSliderLeftTemp) {
            this.timeSliderLeftTemp = timeSliderMax;
        }
    }
    if (newX > this.timeSliderLeftTemp * refer) {
        return false;
    }
    break;

通过以上步骤，可以在PC和移动端浏览器中有效限制视频的未观看部分快进功能，同时确保控制栏在移动端显示，且全屏播放不会违反限制。

转载地址：http://gobyz.baihongyu.com/

你可能感兴趣的文章

Objective-C实现FermatPrimalityTest费马素数测试算法（附完整源码）