vue3-video-play视频组件的使用(一)——基本使用 & HTML5中Video标签的属性、方法和事件汇总
视频
·
vue3-video-play视频组件的使用(一)——基本使用 & HTML5中Video标签的属性、方法和事件汇总
npm地址:https://www.npmjs.com/package/vue3-video-play
demo地址:https://codelife.cc/vue3-video-play/
api地址:https://codelife.cc/vue3-video-play/guide/install.html
1、安装
npm i vue3-video-play --save
yarn add vue3-video-play --save
2、组件使用
全局使用
import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);
import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css
app.use(vue3videoPlay);
app.mount("#app");
组件内使用
// require style
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue-video-play";
export default {
components: {
videoPlay,
},
};
3、参数说明
vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致
名称 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
width | 播放器宽度 | string | - | 800px |
height | 播放器高度 | string | - | 450px |
color | 播放器主色调 | string | - | #409eff |
src | 视频资源 | string | - | - |
title | 视频名称 | string | - | - |
type | 视频类型 | string | - | video/mp4 |
poster | 视频封面 | string | - | 视频第一帧 |
webFullScreen | 网页全屏 | boolean | - | false |
speed | 是否支持快进快退 | boolean | - | true |
currentTime | 跳转到固定播放时间(s) | number | - | 0 |
playsinline | ios点击屏幕是否全屏 | boolean | - | false |
muted | 静音 | boolean | - | false |
speedRate | 倍速配置 | array | - | [“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”] |
autoPlay | 自动播放 | boolean | - | false,为true时会自动静音 |
loop | 循环播放 | boolean | - | false |
mirror | 镜像画面 | boolean | - | false |
ligthOff | 关灯模式 | boolean | - | false |
volume | 默认音量 | number | 0-1 | 0.3 |
control | 是否显示控制器 | boolean | - | true |
controlBtns | 控制器显示的按钮 | array | [‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’] | [‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’] |
preload | 预加载 | string | meta/auto/none | auto |
props
属性 controlBtns
按钮说明
名称 | 说明 |
---|---|
audioTrack | 音轨切换按钮 |
quality | 视频质量切换按钮 |
speedRate | 速率切换按钮 |
volume | 音量 |
setting | 设置 |
pip | 画中画按钮 |
pageFullScreen | 网页全屏按钮 |
fullScreen | 全屏按钮 |
Events
vue3-video-play支持video原生所有事件 video默认事件
事件名称 | 说明 | 回调 |
---|---|---|
mirrorChange | 镜像翻转事件 | val |
loopChange | 循环播放开关事件 | val |
lightOffChange | 关灯模式事件 | val |
loadstart | 客户端开始请求数据 | event |
progress | 客户端正在请求数据 | event |
error | 请求数据时遇到错误 | event |
stalled | 网速失速 | event |
play | 开始播放时触发 | event |
pause | 暂停时触发 | event |
loadedmetadata | 成功获取资源长度 | event |
loadeddata | 缓冲中 | event |
waiting | 等待数据,并非错误 | event |
playing | 开始回放 | event |
canplay | 暂停状态下可以播放 | event |
canplaythrough | 可以持续播放 | event |
timeupdate | 更新播放时间 | event |
ended | 播放结束 | event |
ratechange | 播放速率改变 | event |
durationchange | 资源长度改变 | event |
volumechange | 音量改变 | event |
快捷键说明
支持快捷键操作
键名 | 说明 |
---|---|
Space | 暂停/播放 |
方向右键 → | 单次快进 10s,长按 5 倍速播放 |
方向左键 ← | 快退 10s |
方向上键 ↑ | 音量+10% |
方向下键 ↓ | 音量-10% |
Esc | 退出全屏/退出网页全屏 |
F | 全屏/退出全屏 |
HTML5中Video标签的属性、方法和事件汇总
<video>标签的属性
src :视频的属性
poster:视频封面,没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
html 代码
<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>
//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
获取video对象
Media = document.getElementById("media");
Media方法和属性:
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域,TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置,赋值可改变位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
Media.playbackRate = value;//当前播放速度,设置后马上改变
Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
//相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
4、基本示例
效果
代码
<template>
<div>
<vue3VideoPlay
v-bind="options"
poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
/>
</div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
width: "800px", //播放器高度
height: "450px", //播放器高度
color: "#409eff", //主题色
title: "", //视频名称
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
muted: false, //静音
webFullScreen: false,
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
autoPlay: false, //自动播放
loop: false, //循环播放
mirror: false, //镜像画面
ligthOff: false, //关灯模式
volume: 0.3, //默认音量大小
control: true, //是否显示控制
controlBtns: [
"audioTrack",
"quality",
"speedRate",
"volume",
"setting",
"pip",
"pageFullScreen",
"fullScreen",
], //显示所有按钮,
});
</script>
<style scoped></style>
更多推荐
已为社区贡献72条内容
所有评论(0)