videoplay_ref
v1.0.5
Published
基于vue3封装的视频播放功能,包括进度条、点击播放、视频加倍播放,视频播放进度
Maintainers
Keywords
Readme
1、下载
npm i videoplay_ref2、引入
//本地引入
import { Video } from '@/assets/utils/videoplay_ref.js';
//模块引入
import {video} = require('videoplay_ref.js');
import {Video } from 'videoplay_ref';3、设置自动播放
自动播放需要 需要设置自定义属性 data-isPlay 或 isPlay 任意一种都行
<video autoplay muted playsinline data-isPlay="true" isPlay="true">
//一个页面只用一个视频 可通过IsPlay(true) ; 最好不用
4、Api 说明
Video() , 视频 ,值可以 是 name =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
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>
//抖音号: 磊哥带你飞