未经他人苦,莫劝他人善
初次接触视频相关的内容,查阅文档之后基本满足项目简单需求。
罗列一下实现的功能
- video在一个弹窗里进行展示
- 打开弹窗,自动播放视频
- 关闭弹窗,停止播放视频并将播放时间重置
使用技术
vue 、 video标签
遇到的问题
首次打开该视频,就自动播放。但是当关掉弹窗,再次打开时就不会自动播放了。
页面效果:
功能逻辑:
点击图片,打开弹窗,自动播放
实现效果的代码
<template>
<div class="item_container">
<div class="img_wrapepr">
<img :src="videoItem.src" alt="img load error" @click="centerDialogVisible = true" />
</div>
<p>{{videoItem.desc}}</p>
<el-dialog
class="dialog_wrapper"
:visible.sync="centerDialogVisible"
width="70%"
:before-close="closeDialog"
>
<video
ref="mediaVideo"
:style="{width:'100%'}"
:src="videoItem.url"
controls="controls"
>您的浏览器不支持 video 标签。</video>
</el-dialog>
</div>
</template>
<script>
export default {
name: "item",
props: {
videoItem: {
type: Object
}
},
data() {
return {
// 弹窗显示状态
centerDialogVisible: false
};
},
watch: {
// 监听弹窗显示状态
// 当状态为真时,获取video元素,进行播放操作
// 并不需要设置首次监听 immediate:true 因为弹窗状态默认为false
centerDialogVisible: {
handler() {
const that = this;
if (!this.centerDialogVisible) return;
this.$nextTick(() => {
that.$refs.mediaVideo.play();
});
}
}
},
methods: {
// 关闭弹窗
// 当关闭弹窗时,需要将播放时间重置并关闭,如果不重置,再次打开时依旧在当前进度
closeDialog() {
this.centerDialogVisible = false;
let Media = this.$refs.mediaVideo;
Media.currentTime = 0;
Media.pause();
}
}
};
</script>
video标签可配置的基本属性
autoplay
:如果出现该属性,则视频加载就绪会自动播放。controls
: 显示空间,如:播放按钮height width
: 设置视频播放器的高度以及宽度loop
: 是否循环播放muted
: 是否静音播放poster
:视频下载时显示的图像,或者在用户点击播放按钮前显示的图像preload
:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。src
:播放的视频的 URL
常用属性:
Media.play(); //播放
Media.pause(); //暂停
Media.paused = bool; //是否暂停 bool为Boolean值
Media.ended = bool; //是否结束 bool为Boolean值
Media.autoPlay = bool; //是否自动播放 bool为Boolean值
Media.loop = bool; //是否循环播放 bool为Boolean值
Media.controls;//是否有默认控制条 bool为Boolean值
Media.currentTime = value; //当前播放的位置,赋值可改变位置 value单位为s
Media.volume = value; //音量
Media.muted = bool; //静音 bool为Boolean值
js可操作的video相关事件
首先要获取元素:
<video
ref="mediaVideo"
:style="{width:'100%'}"
:src="videoItem.url"
controls="controls">
您的浏览器不支持 video 标签。
</video>
<script>
export default {
methods:{
operationDom(){
const Media = this.$refs.mediaVideo
}
}
}
</script>
Media
获取方式如上⬆️
可操作事件如下⬇️
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段区域的结束位置
//相关事件
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"); //音量改变