首页 > 技术文章 > vue 视频播放

moguzi12345 2021-05-07 11:25 原文

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>

 

 

 

推荐阅读