@vf.js/videoplayer

安装&使用

    npm i @vf.js/videoplayer --save-dev

    import { VFVideoPlayer } from '@vf.js/videoplayer'

示例

    const player = new VFVideoPlayer({
        // 选择器
        id: 'mse', //  需要手动添加<div id="mse"></div>
        // 自动播放，部分设备有效
        autoplay: true,
        // 封面图
        poster:'//img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
        // 要播放的视频，至少1个
        urls:[
            { 
                name: '超清', 
                url: '//player.alicdn.com/video/editor.mp4',
                default: true, // 默认要播放的清晰度
            }, 
            { 
                name: '高清', 
                url: '//player.alicdn.com/video/editor.mp4' 
            }, 
            { 
                name: '标清', 
                url: '//player.alicdn.com/video/editor.mp4'
            }
        ],
        nativeTextTrack: [ // 可选
            {
                src: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/textTrack-1.vtt",
                label: "字幕1",
                default: true, // 默认要播放的字幕
            },
            {
                src: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/textTrack-2.vtt",
                label: "字幕2",
                default: false
            }
        ],
        // 内联模式 https://webkit.org/blog/6784/new-video-policies-for-ios/
        // 该选项在手机观看时，开启ios和微信的内联模式
        playsinline: true,
        // volume: 0.6, // 音量（默认0.6）
        // width: 600, // 宽度(默认600)
        // height: 337.5,// 高度（默认337.5）
        // playbackRate: [0.5, 1],// 播放速度
        // 画中画
        // pip: true,
    });

动态修改播放器大小

    player.width = '1000px';
    player.height = '1000px';

常用属性

    player.currentTime = 10; // 获取或设置视频的播放时间（秒）

常用方法

    player.play(); // 播放
    player.pause(); // 暂停
    player.destroy(); // 播放器销毁

播放器事件

    // 事件监听
    player.on('play',function(){
    
    });

• play 播放
• playing 继续播放
• pause 暂停
• ended 结束
• error 错误 错误信息对象 {...}
• seeking seek播放
• seeked seek播放结束
• timeupdate 播放时间改变
• waiting 等待加载数据
• canplay 视频可以播放
• canplaythrough 视频可以流畅播放
• durationchange 时长发生变化
• volumechange 音量发生变化
• bufferedChange 缓冲发生变化 当前缓存片段数组 [ [0, 10], [25, 60] ]
• definitionChange 清晰度发生变化 切换前后清晰度 { from: '360p', to: '720p' }
• playbackrateChange 播放速度发生变化 切换前后速度 { from: 1, to: 2 }
• screenShot 完成截图操作 包含截图data URI的DOMString
• requestFullscreen 进入全屏
• exitFullscreen 退出全屏
• requestCssFullscreen 进入样式全屏
• exitCssFullscreen 退出样式全屏
• getRotateFullscreen 进入样式横屏全屏
• exitRotateFullscreen 退出样式横屏全屏
• controlShow 控制栏展示
• controlHide 控制栏隐藏
• settingClick 点击右上角设置时触发
• noteClick 点击笔记按钮时时触发

多集连播

new VFVideoPlayer({
        playNext: {
            urlList: [
            'url1',
            'url2',
            'url3'
            ],
        }
});

version

v0.0.15

修复卸载视频，重新创建时，进度条异常

v0.0.13

修复进度条异常

v0.0.11

• 增加视频截图

    // 获取当前视频截图： 
    player.vfScreenShot()
    // 获取当前视频截图，指定目标的宽高： 
    player.vfScreenShot(100，100)

v0.0.10

• 删除暂停后，标题中的视频时长
• 优化播放按钮位置
• 增加标题背景遮罩

v0.0.7

• 初始化增加标题与视频时长参数
• 增加开始时背景遮罩

// 视频标题
title: '1. 这是一个测试视频',
// 视频时长(秒)
duration: 91

v0.0.5

• 进度条修改为渐变色
• 设置按钮修改为触发事件 player.on('settingClick',function(videoPlayer){}); // 点击了笔记设置
• 增加笔记按钮与事件触发 player.on('noteClick',function(videoPlayer){}); // 点击了笔记按钮
• 修改字幕按钮显示规则，数组大于1显示
• 修改清晰度按钮显示规则，数组大于1显示