目录
环境:
vue 2.0+
element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式)
在项目中安装 video.js
。
npm install video.js
在 main.js
中引入以下内容:
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
实现的效果是:初始时,视频播放不会显示。点击按钮后,视频显示出来,跨域进行播放。
<template>
<el-button @click="videoShow = !videoShow">观看视频<i class="el-icon-right"></i></el-button>
<div class="player" v-if="videoShow === true">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" v-if="videoShow === true"
@ended="onPlayerEnded($event)">
<source src="../assets/video/video.mp4 type="video/mp4" >
</video>
</div>
</template>
<script>
export default {
name: "Videojs",
data() {
return {
videoShow: false,
}
},
methods: {
// 监听视频播放结束事件
onPlayerEnded() {
console.log("视频结束啦------")
this.videoShow = !this.videoShow;
},
},
}
</script>
不知道为什么,按钮绑定事件不会生效( @click='getVideo'
),就是,初始时看不见视频,点击按钮后,视频依然出不来,我也不知道这是为啥。我写的按钮绑定事件时下面的样子
<script>
methods: {
getVideo() {
this.videoShow = !this.videoShow;
},
},
</script>
Github 参考文档:vue-video-player
手机扫一扫
移动阅读更方便
你可能感兴趣的文章