video 的使用

女爷i 2022-01-09 10:37 133阅读 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))
                })
            },

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

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关使用video speed controller给视频加速

日常生活中，视频的信息获取速度无法控制，必须耐着性子听缓慢又冗长的视频讲座，就会注意力涣散。现在，video speed controller 针对 html5 视频提供加

落日映苍穹つ/ 2022年12月13日 14:09/ 0 赞/ 173 阅读

相关 vue-video-player的使用总结

由于公司的项目是网上教育的，像网易云课堂那种教育网站，因而会有很多课程需要在线观看的，所以视频插件是必不可少的。由于我用vue开发项目，所以找视频插件也找和vue贴近的。最

蔚落/ 2022年11月25日 11:46/ 0 赞/ 123 阅读

相关 Vue 使用 Video.js

一、安装 $ npm install video.js 二、main.js全局引入 // 引入video.js import Vide

小鱼儿/ 2022年09月04日 02:56/ 0 赞/ 314 阅读

相关 flash&&video

1.html5的video标签,可以播放MP4，flv格式的，满足拖拉快进，暂停，但是不支持IE8播放视频。（Video.js ） 2.在线web播放器，比如jwplaye

谁借莪１个温暖的怀抱￠/ 2022年08月22日 01:12/ 0 赞/ 91 阅读

相关 Mysql数据库中将cmf_videos表中covers字段中的//video替换为/video

update \`cmf\_videos\` SET \`covers\` = REPLACE(\`covers\`, '//video', '/video')

叁歲伎倆/ 2022年06月08日 01:39/ 0 赞/ 72 阅读

相关 video标签播放器的使用，列表播放的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淩亂°似流年/ 2022年04月16日 06:13/ 0 赞/ 397 阅读

相关 Video标签

1、标签属性 <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead>

迷南。/ 2022年03月17日 15:23/ 0 赞/ 150 阅读

相关 react-native-video使用攻略

[源码在此][Link 1] 仅供参考 -------------------- 一、简介 react-native-video是一个可以播放视频的组件，它的用法简单

我不是女神ヾ/ 2022年03月15日 12:26/ 0 赞/ 909 阅读

相关 video 的使用

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

女爷i/ 2022年01月09日 10:37/ 0 赞/ 134 阅读

相关如何使用HTML5中video标签

如何使用HTML5中video标签 HTML5 video标签的详细用法用于播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样做的好处是...

小灰灰/ 2020年06月09日 15:36/ 0 赞/ 981 阅读