1、下载

1.0.7

npm i videoplay_ref

2、引入

//本地引入
import { Video } from '@/assets/utils/videoplay_ref.js';
//模块引入
const videoplay_ref = require('videoplay_ref.js');

import {Video } from 'videoplay_ref';
//原生script全局引入
//<script src="videoplay_ref.js"></script>
//const vp = window.videoplay_ref;

3、设置自动播放

<!-- 自动播放需要设置自定义属性 data-isPlay 或 isPlay 任意一种都行 -->
<video autoplay muted playsinline data-isPlay="true" isPlay="true"></video>
<!-- 一个页面只用一个视频 可通过IsPlay(true) ; 最好不用 -->

新增 & 修复说明：

1. 自动播放默认静音绕过浏览器拦截，可修改源码顶部VideoConfig.muteAutoPlay = false关闭自动静音；
2. 修复原代码仅标记状态不执行 play () 导致无法自动播放问题；
3. 新增 canplay 事件兜底，短视频元数据加载过快也能正常触发自动播放；
4. 自动播放失败会控制台打印警告，提示浏览器交互限制。

4、Api 说明

Video() , 视频 ，值可以是 ref实例 , 也可以是字符串 id 名或 class 名字 #id 或 .class
Duration 显示视频总时长， 值同上 ，自动填充innerText
CurrentTimes 显示播放进度时间 ，值同上，自动填充innerText
IsPlay(值)； 值为 boolean，全局设置自动播放，多视频页面最好不用
startPlay 开始播放按钮 值同上
pausePlay 暂停播放按钮 值同上
VideoAdvance 快进按钮，值同上
VideoBack 快退按钮， 值同上

Videomuted 控制静音按钮 ， 值同上
Volume0 音量增加按钮 值同上
Volume1 音量减少按钮 值同上

VideoProgress 进度条 值同上 ，播放自动同步value(0-100)，支持input拖拽跳转
PlaybackRate 绑定倍速选择容器，控制播放倍数
VideoSpeed 设置快进快退步长，参数为 number

// 新增扩展API
VideoBuffer 缓冲进度DOM容器，自动渲染视频缓冲加载条
FullScreen 全屏切换按钮，兼容webkit浏览器全屏
Destroy 页面销毁调用，清空所有事件监听，防止内存泄漏

修复优化点：

1. 重写 DOM 选择器，支持全部 CSS 选择器，修复原 #/.class 选择器缺陷；
2. 修复原代码播放状态 isPlay 与视频真实状态不同步问题（监听 play/pause 原生事件）；
3. 音量静音优化：切换静音会保存原有音量，取消静音恢复；
4. 快进快退增加边界限制，不会超出 0 和视频总时长；
5. 倍速增加区间限制 0.25~4 倍，防止异常数值；
6. 所有 DOM 操作增加判空，不存在对应元素不会控制台报错；
7. 监听 video error 加载失败事件，打印错误日志方便排查视频地址问题。

5、播放倍数说明

<span class="speedSelect">
    <select >
        <option value="0.5">0.5倍</option>
        <option value="1.0" selected>1.0倍</option>
        <option value="1.5">1.5倍</option>
        <option value="2.0">2.0倍</option>
    </select>
</span>
<script>
	PlaybackRate('speedSelect')
</script>

6、全局配置修改（自动播放静音控制）

源码顶部 VideoConfig 配置，控制全局默认行为

const VideoConfig = {
  defaultVolume: 0.5,    // 默认音量
  defaultSpeed: 2,       // 默认快进快退秒数
  autoPlay: false,       // 全局自动播放开关
  muteAutoPlay: true,    // 自动播放是否临时静音，改为false关闭静音
  minVolume: 0,
  maxVolume: 1,
  minPlaybackRate: 0.25,
  maxPlaybackRate: 4
};

7、新增功能使用示例（缓冲 + 全屏 + 销毁）

<!-- 缓冲条 -->
<div class="buffer-bar"></div>
<!-- 全屏按钮 -->
<button class="full-btn">全屏</button>

// 绑定缓冲进度js
vp.VideoBuffer('.buffer-bar');
// 绑定全屏按钮
vp.FullScreen('.full-btn');

// 页面卸载销毁，释放内存
window.addEventListener('beforeunload', () => {
  vp.Destroy();
})

8、浏览器限制补充

file:// 本地文件打开页面，所有自动播放失效，必须搭建本地服务； 无用户点击交互时，有声自动播放会被浏览器拦截； 移动端强制要求用户点击后才能播放视频，无法自动播放。