首页 > 其他 > 详细

video 的使用

时间:2019-04-15 16:39:21      阅读:109      评论:0      收藏:0      [点我收藏+]

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))
            })
        },

  

video 的使用

原文:https://www.cnblogs.com/taochengyong/p/10711179.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!