vue 项目中使用video实现视频播放效果暂停播放

最新推荐文章于 2024-02-22 16:48:39 发布

.. ..

最新推荐文章于 2024-02-22 16:48:39 发布

阅读量1.9k

点赞数

文章标签：音视频前端 javascript

本文链接：https://blog.csdn.net/weixin_45597687/article/details/129981507

版权

1.html 中

<video
        ref="videoPlayer"
        id="videoPlayer"
        class="video-box"
        autoplay
        controls
        loop
        muted
       >
</video>

2.js中

this.$refs.videoPlayer.src = ‘xxxxx’;
this.$refs.videoPlayer.play();
this.$refs.videoPlayer.muted = false;

3.设置浏览器默认打开声音

关注博主即可阅读全文

优惠劵

.. ..

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 项目中使用video实现视频播放效果暂停播放

vue 项目中使用video实现视频播放效果暂停播放
复制链接

扫一扫

HTML5页面音视频在微信和app下自动播放的实现方法

01-19

现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。这样做主要是为了防止不必要的自动播放浪费流量。以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放 XML/HTML Code复制内容到剪贴板 function autoPlayMusic() { /* 自动播放音乐效果，解决浏览器或者APP自动播放

vue-video-player实现实时视频播放方式(监控设备-rtmp流)

10-14

主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

Vue.js监听事件控制 HTML ＜video＞标签视频停止播放

yuxiangmitu的博客

08-27

1万+

项目开发过程中遇到需要在表单中上传视频并回显的情况，表单使用element-form，上传视频使用阿里云接口，在video标签里加了autoplay属性让视频自动播放。某天上班戴耳机听歌时才发现，表单关闭后视频竟然还在播放，并没有停止。

Vue 实现两个视频同步播放、暂停，进度条、倍速保持一致

zhengzzzzz的博客

08-18

2618

Vue 实现两个视频同步播放、暂停，进度条、倍速保持一致

vue-video-player 断点续播、快进控制

热门推荐

卡卡罗特的博客

02-19

1万+

在html5中，视频会被越来越用到。flash，2020年底，谷歌就要淘汰了，以后就是video的天下了，哈哈。这里简单介绍一下，平时常用的video,几个方法，属性。 <video class="videoSrc" width="794" height="446 "src="video/impressionen_2019_1min_FINAL.mp4" id="wyn"> ...

vue 播放视频 -- 自定义播放、停止播放

拿回忆下酒

06-15

4409

前端如何播放视频，这里我们可以通过vue+vue-video-player来实现首先下载 cnpm i vue-video-player --save-dev 在main.js引入 import Vue from 'vue' import VideoPlayer from 'vue-video-player'; require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use

自定义按钮实现video暂停和播放的方法

weixin_46096438的博客

07-12

2109

自定义按钮实现video暂停和播放的方法

微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo

03-29

一个页面同时有很多视频播放，当用户点击一个视频后，开始播放视频，当点击另一个视频后，暂停前一个播放视频，让当前页面只有一个视频处于播放状态原理播放视频时，先判断当前是否有视频正在播放，如果没有，则播放，如果有，则暂停其他视频，再播放当前视频

微信小程序多个视频合成一个播放。一个播放完自动在播放另一个。自定义视频进度组件

07-01

微信小程序多个视频合成一个播放。一个播放完自动在播放另一个。给用户一种只播放了一个视频的错觉。我们有多个视频但是后端合成一个视频的成本比较高希望前端合并。所以只能一个video标签通过显示不通的src来一个个的播放。自定义视频的播放进度组件

vue中用 video.js 实现单个页面内多视频播放.zip

02-19

vue中用 video.js 实现单个页面内多视频播放 1、index_v01.vue 实现单页面内多视频播放，如效果图； 2、index_v02.vue 实现单页面内多视频播放，可视区域内的视频播放，不在可视区域内的暂停。以防止在视频量大的情况下，页面压力过大。

vue项目中自定义video视频控制条的实现代码

11-21

最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。首页效果图：需求描述：当鼠标放在图片上的时候，自动播放视频，并...

vue视频播放暂停代码

01-21

vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video html页面 <video id=vide class=video-js v2 ...

VueScrollVideo:一个标准的移动端富文本页面，本项目基于vue.js 实现了流媒体视频的播放，并实现了视频组件滑出屏幕暂停，滑入屏幕重新播放的功能

05-09

VueScrollVideo这是效果图(gif)实现了如下功能：1.基于vue-video-player 播放流媒体2.播放控制：滑出屏幕暂停，滑入屏幕重新播放3.基于vue-bus 进行组件间的通信4.一个标准的富文本排版使用步骤# install ...

vue video怎么实现js暂停播放

08-26

要在Vue中使用video.js来实现视频的暂停和播放，你需要首先在main.js中引入video.js库并注册为Vue的原型属性。你可以使用以下代码来实现这一步骤： ``` import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video ``` 接下来，在你的Vue组件中使用video标签来嵌入视频，并给它一个ref属性来引用它。你还可以给video标签添加一个class属性，比如`vjs-default-skin`和`vjs-big-play-centered`，用来设置视频播放器的样式和播放按钮的位置。下面是一个示例代码片段： ``` <template> <div> <video ref="videoNode" class="video-js vjs-default-skin vjs-big-play-centered"></video> </div> </template> <script> export default { mounted() { this.player = this.$video(this.$refs.videoNode) // 通过this.player来控制视频的播放和暂停 }, beforeDestroy() { this.player.dispose() } } </script> ``` 在`mounted`钩子中，我们使用`this.$video`来创建一个video.js播放器实例，并将video节点传递给它。然后，你可以通过`this.player`来控制视频的播放和暂停等操作。在`beforeDestroy`钩子中，我们释放播放器资源，以避免内存泄漏。这样，你就可以在Vue中使用video.js实现视频的暂停和播放了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中用 video.js 实现单个页面内多视频播放.zip](https://download.csdn.net/download/you199037/15365681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue 项目中使用video实现视频播放效果暂停播放（多个视频）](https://blog.csdn.net/Min_nna/article/details/128300507)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [在vue项目中使用video.js实现视频播放和视频进度条打点](https://blog.csdn.net/qq_31851435/article/details/129194901)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交