vue 视频播放

1、视频查看按钮：

<div class="video_btn" @click="showVideo">
　　<img style="display: inline-block;vertical-align: middle;width: 18px;" src="../../assets/software_img/video.png">
　　<span>安装视频</span>
</div>

2、el-dialog：

<el-dialog :visible.sync="dialogVisible" width="50%">
　　<video
　　　　src="../../assets/software_img/lampBelt.mp4"
　　　　:controls="videoOptions.controls"
　　　　class="video-js vjs-big-play-centered vjs-fluid"
　　　　webkit-playsinline="true"
　　　　playsinline="true"
　　　　x-webkit-airplay="allow"
　　　　x5-playsinline
　　　　style="width: 100%;"
　　　　@play="onPlayerPlay"
　　　　@pause="onPlayerPause"
　　　　autoplay="autoplay"
　　　　ref="video">
　　</video>
</el-dialog>

3、script：

<script>
    export default {
        name: 'softwareDownload',
        data() {
            return {
                dialogVisible: false,
                videoOptions: {
                    controls:true,
                    src: "../../assets/software_img/lampBelt.mp4", // url地址
                },
                player: null,
                playTime:'',
                seekTime:'',
                current:'',
            }
        },
        created() {

        },
        mounted() {
        },
        beforeDestroy() {
            if (this.player) {
                this.player.dispose();
            }
        },
        methods: {
            showVideo() {
                this.dialogVisible = true;
                this.initVideo();
            },
            initVideo() {
                //原生初始化视频方法
                let myVideo = this.$refs.video;
                //ontimeupdate
                myVideo = 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) > 2){
                        myVideo.currentTime = Number(time);
                    } else {

                    }
                };
            },
            // 播放
            onPlayerPlay(player) {
            },
            // 暂停
            onPlayerPause(player) {
            },
        },
    }
</script>