video标签和videojs配置（vue视频弹窗组件）

直接摆出一个视屏弹窗的vue组件代码
实现效果：
点击父组件中某个按钮后，打开视频弹窗，并且可以通过X按钮关闭
优点：
动态生成与销毁video标签，解决hls视频流数据一直在后台请求的问题，避免关闭弹框后，视频流数据传输仍在继续消耗资源。
实现的方法：
1.向外抛出了两个属性：visible和videoURL，visible用于控制弹窗组件的生成与销毁，控制核心是v-if；videoURL是用于接收外部点击后传入的视频地址
2.由于只能在updated上添加video标签的原因，只能将videojs代码写在updated上；引发的问题是，在关闭弹窗时，updated又会触发，进而又会触发一次videojs代码的执行，在此定义了一个参数statu，并通过取反来标识区分进入和退出时的updated

需要在html入口文件中添加如下配置，用于解析视频

<meta name="referrer" content="no-referrer">

组件代码：

<template><div class="box" v-if="visible"><span class="exit" @click="exit">X</span><div class="fadom"></div></div>
</template><script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {props: {visible: {type: Boolean,default: false},videoURL: {type: String,default: ''}},data () {return {player: null, // 接收定义的vedio,在销毁时使用statu: false}},updated () {this.statu = !this.statu  // 取反，标识区分进入和退出时的updatedif (this.statu) {this.video()}},methods: {exit () {this.player.dispose()  // vedio标签销毁，截止视频流的传输this.$emit('update:visible', false)},video () {let videoTag = nullconst fadom = document.getElementsByClassName('fadom') // 获取vedio标签存放的父节点，准备在该标签下添加生成vedio标签console.log(fadom)console.log(fadom.children)if (!fadom.children) {videoTag = document.createElement('video') //新建一个vedio标签videoTag.setAttribute('class', 'video-js vjs-default-skin box')videoTag.setAttribute('controls', true)videoTag.setAttribute('preload', 'auto')videoTag.setAttribute('src', this.videoURL)videoTag.setAttribute('width', '800px')videoTag.setAttribute('height', '600px')// 以上都是使用setAttribute方法给新生成的vedio标签添加属性，更多配置属性可以在vediojs官网上查看并添加fadom[0].appendChild(videoTag)  // 将新生成的vedio标签添加在预设好的父节点下}const options = {sources: [{src: this.videoURL, // 配置视频地址type: 'video/mp4'  // 配置解析的视频文件类型}]}this.player = videojs(videoTag, options, function () {this.play()  // 使用vediojs方法，实现视频播放的功能，videoTag是上面生成的新vedio标签，optins是上面配置的sources属性})}}
}
</script><style lang='scss' scoped>
.box {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);height: 600px;width: 800px;z-index: 9999;.video {width: 800px;height: 600px;}.exit {position: absolute;width: 65px;height: 65px;border-radius: 50%;left: 50%;transform: translateX(-50%);font-size: 25px;text-align: center;line-height: 65px;z-index: 10000;color: rgb(255, 255, 255);background-color: black;opacity: 0.5;}
}
</style>

学习到的新的理解
1.子组件在父组件渲染时便开始渲染，并且会在父组件mounted之前执行完mounted,但是，此处的子组件虽然mounted完了，但是由于标签由v-if控制生成的原因，所以即使mounted完了，也不可能拿到里面的DOM元素，需要通过updated去拿
和之前理解上的区别是：之前认为一个页面组件的首次渲染完毕展示出来，就是这个页面组件的mouted；但是此处由于它作为子组件的原因，在父组件渲染完毕之前，它的mounted便以结束

video标签和videojs配置（vue视频弹窗组件）相关推荐

video标签的全部配置
video标签的全部配置 src:要播放的路径地址 autoplay:是否自动播放,默认值是false,(Boolean) loop:是否循环播放,默认值是false,(Boolean) muted: ...
[html] 说说video标签中预加载视频用到的属性是什么？
[html] 说说video标签中预加载视频用到的属性是什么? 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
H5：使用video标签在页面中插入视频
常用属性和值: 例: <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...
HTML5里video标签支持哪些格式的视频文件
video标签支持的视频格式: Ogg.MPEG4.WebM MP4 = MPEG 4 文件使用H264视频编解码器和AAC音频编解码器 WebM =WebM 文件使用 VP8视频编解码器和Vorbi ...
HTML5中关于解决video标签禁止右键和下载视频的办法
近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户.消息.项目.分享.文件提取.收藏.回收站等主要功能,领挖还有一些office.压缩包.图片.文本.音频和视频的预览功能. 音频我使用的是 ...
vue 自定义弹窗组件
父组件 <template><div><p @click="onDelete">打开</p>< ...
vue自定义弹窗组件
在平时写页面的时候,一些页面总是需要到弹窗,可以将它写成组件的形式,考虑到有不一样的弹窗,可以按照下面的来写: 新建popup.vue, <template><div class=& ...
video标签布播放FLV直播视频
不多哔哔直接上案例 <videoref="video"class="video-js vjs-default-skin vjs-big-play-centered ...
Video标签自动启动迅雷，下载视频资源
问题:用el-upload上传视频资源后,得到视频链接:将视频链接放到video的src属性上,网页上并不会显示视频,而老是自己启动迅雷下载.如下图所示: 解决思路: 1)卸载掉迅雷 (不能要求用户去 ...

video标签和videojs配置（vue视频弹窗组件）

video标签和videojs配置（vue视频弹窗组件）相关推荐

最新文章

热门文章