1.video播放器组件设计

啥也别说了，上代码：

<template>
<div><meta content="no-referrer" name="referrer"><video :controls="videoOptions.controls"class="video-js vjs-big-play-centered vjs-fluid"webkit-playsinline="true"playsinline="true"x-webkit-airplay="allow"x5-playsinlinestyle="width: 100%;"@play="onPlayerPlay"@pause="onPlayerPause"@seeking="seeking"autoplay="autoplay"ref="video"id="myVideo1"><source :src="videoOptions.src" type="video/mp4" v-on:click="startVideo"></source></video>
</div>
</template><script>export default {name:"showVideo1",props:{},data(){return {videoOptions:{controls:true,src: "http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4"},player: null,playTime:"",seekTime:'',current:'',}},beforeRouteLeave(){//},mounted() {this.initVideo();},methods: {initVideo() {//原生初始化视频方法let myVideo = this.$refs.video;// ontimeupdatemyVideo.ontimeupdate = function() {myFunction()};let _this = this;function myFunction(){let playTime = myVideo.currentTime;setTimeout(function () {localStorage.setItem("cacheTime",playTime)},500);let time = localStorage.getItem("cacheTime");// 当前播放位置发生变化时触发。if(playTime - Number(time) > 30){myVideo.pause();myVideo.currentTime = Number(time);myVideo.play();}else{}};       },onPlayerPlay(player){this.globalSetting = true;document.getElementsByClassName("vjs-control-bar").style.display = "block";},onPlayerPause(player){this.globalSetting.controls = false;console.log("player pause!", player);var video = document.getElementById("video");video.controls=false;document.getElementsByClassName("vjs-control-bar").style.display = "none";},beforeDestroy() {if (this.player) {this.player.dispose()}}},}
</script>
<style></style>

2.在弹窗中运用视频组件

此处需要注意我们的视频一旦播放，关闭弹窗也无法停止，因此我们采用element-ui弹窗中的打开和关闭属性来操作视频

<template>
<div @click = "videoShow()">点击播放视频</div><el-dialog :visible.sync="show" width="70%" :append-to-body="true" @close="startVi()"@open="startVi()"><div style="min-height: 500px;"><showVideo1 ref="showVideo1"></showVideo1></div></el-dialog>
</template>
<script>
import showVideo1 from "video_1.vue";
export default {props: ["home"],components:{showVideo1},data() {return {show:false}},methods:{videoShow(){this.showVideo1 = true;},//关闭弹窗则暂停并且重置视频startVi(){document.getElementById('myVideo1').currentTime=0;document.getElementById('myVideo1').pause();}}
</script>

3.小结

创建好的播放器存在关闭弹窗后继续播放的缺陷，因此我们利用了数据绑定来获取我们设计的播放器组件的属性和方法，并在父组件进行调用来重置播放器的视频播放。

video标签设计vue视频播放器组件相关推荐

Video标签自定义简易视频播放器
Video标签自定义简易视频播放器提示:以下是本篇文章正文内容,下面案例可供参考一.Dom结构 <template><el-dialog :title="winTitl ...
video标签学习 xgplayer视频播放器分段播放mp4
文章目录学习链接目标 video标签自带视频和制作的视频区别 video标签的src属性本地视频文件前端代码播放效果服务器视频文件示例1 后端代码前端代码播放效果示例2 后端代码 ...
Android课程设计之视频播放器
CSDN下载:https://download.csdn.net/download/eseszb/10463442 移动互联网开发课程设计报告学生姓名:学号: 专业:计算机科学与技术班级: ...
原生h5+css3 实现简单视频播放器组件
视频播放器组件案例实现效果实现功能全屏切换进度条点击跳播音量点击设置大小涉及知识点 video对象属性 .duration 获取视频总长度(秒) .currentTime 当前播放时间(秒 ...
Vue3视频播放器组件Vue3-video-play入门教程
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式. 1.支持快捷键操作 2.支持倍速播放设置 3.支持镜像画面设置 4.支持关灯模 ...
HTML5 video标签，自定义播放器
video标签: video常用的属性: controls 不写controls视频不会播放属性规定浏览器应该为视频提供播放控件(暂停进度条全屏属性) poster 封皮路径 autoplay ...
Android短视频播放器组件库GSYVideoPlayer和仿抖音切换DKVideoPlayer可以悬浮框及滑动小屏播放
原文地址:https://blog.csdn.net/u011287484/article/details/105202121/ 实现安卓上的短视频播放器功能,有两个好用的组件库GSYVideoPla ...
在linux下QT设计实现视频播放器
通过QT对mplayer的应用,实现视频播放器的功能,包括开始播放.暂停播放.继续播放.终止播放.播放上一个.播放下一个.添加指定目录下的视频.删除指定视频.清空列表.应用到multimedia.mu ...
微信网页开发之video标签[HTML5微信播放器video]
先了解一下w3c video标签大致主要的也就这么点,更详细的请去自己W3C去阅览: 先说为什么会写这篇文章,因为公司最近有个需求,就是微信页面上要有APP端录制的视频. 说白了就是微信网页要有视频 ...

video标签设计vue视频播放器组件

文章目录

1.video播放器组件设计

2.在弹窗中运用视频组件

3.小结

video标签设计vue视频播放器组件相关推荐

最新文章

热门文章