video 的使用

video ui给了默认的暂停图片 利用video自身的属性很难达到效果  这里自己写了个 简单记录下

<div class="cg-container video-img">
                <img src="../static/img/index/index_video_1.png" v-show="!playHide" @click="playVideo">
                <video src="http://video/%E6%9C%BA%E5%99%A8%E7%8C%AB%E4%BA%92%E8%81%94%E7%BD%91%E5%BF%AB%E8%A3%85%E5%B9%B3%E5%8F%B0.mp4" controls height="675px" width="1200px" id="video" @click="playOrPause"></video>
            </div>

　　

 

 

playVideo () { // 备注 播放
            let myVideo = document.getElementById('video')
            this.playHide = !this.playHide
            myVideo.play()
        },
        playOrPause () { // 备注 暂停
            var video = document.getElementById('video')
            this.playHide = false
            // video.pause()
            function pauseAll () {
                let self = this;
                [].forEach.call(video, function (i) {
                    // 将audios中其他的audio全部暂停
                    i !== self && i.pause()
                })
            }
            // 给play事件绑定暂停函数
            [].forEach.call(video, function (i) {
                i.addEventListener('play', pauseAll.bind(i))
            })
        },

　　

转载于:https://www.cnblogs.com/taochengyong/p/10711179.html