video 的使用

女爷i 2022-01-09 10:37 174阅读 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 条评论，174人围观）

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

相关阅读

相关 video-09-video音频视频进度条无法正常使用问题

> 开发过程中遇到了，进度条无法使用，吓我一跳，还以为是开发有问题呢目录一、现象二、原因三、解决 -------------------- 一、现象

秒速五厘米/ 2023年10月13日 08:57/ 0 赞/ 39 阅读

相关 video-04-videojs配置及使用

> videojs是一种轻框架，可以帮我们快速开发一个video视频组件目录一、参考资料二、引入videojs 三、简单了解使用四、配置项和事件 4.1

￡神魔★判官ぃ/ 2023年10月13日 07:57/ 0 赞/ 22 阅读

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

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

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

相关 Vidmore Video Converter使用教程

Vidmore Video Converter Mac版是一款功能强大的音视频转换软件，Vidmore Video Converter Mac版支持带有H.265编\\\的4K

ゝ一世哀愁。/ 2022年10月24日 02:16/ 0 赞/ 93 阅读

相关 Vue 使用 Video.js

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

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

相关 flash&&video

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

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

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

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

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

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

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

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

相关 react-native-video使用攻略

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

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

相关 video 的使用

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

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