vue实现静音播放video标签（视频/视频流）

最新推荐文章于 2024-04-08 10:10:42 发布
最新推荐文章于 2024-04-08 10:10:42 发布
阅读量4.9k 收藏 2
点赞数 1
分类专栏： VUE HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20889171/article/details/103957801
版权
VUE 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏

可以通过控制音量来解决该问题

通过volume 属性把音量降到0

html代码

示例代码测试环境为播放视频流,视频流使用js加载到video标签中，相关代码没有贴出

 <video 
 		 id="localVideo"
         ref="localVideo"
         autoplay
         playsinline>
</video>

js代码参考

 this.$nextTick(() => {
	 //调整音量为0
	 this.$refs.localVideo.volume = 0;
 })

通过video标签的muted属性无效

在项目实践中，发现在通过video播放视频流时，使用muted 属性并不能静音，muted 加在html或者js中都没有效果

「已注销」
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Vue——video标签实现不静音自动播放
weixin_45566730的博客
08-25 1万+
video标签在单页面富应用中实现有声自动播放
HTML Video 元素在 Vue 中消失的 muted 属性
ikxin的博客
03-25 475
公司有个新项目由我这边独立选型开发，项目需求是做一个英文的产品展示官网，考虑到项目比较简单且周期不长，最终决定使用 Nuxt 框架来进行开发。开发过程还算顺利，但中途遇到一个 Bug 花了我不少的时间，在网上找了许久，仅能检索到极少数相关内容，都是在 Vue 的 Github 仓库中的 issues，且最终仍未能够找到问题所在，当然这也许并不是 Bug，而是框架本身设计的就是这样。以下是我的解决思路，如果各位大佬有别的见解，请指出交流。
vue-aliplayer-v2 vue中默认静音设置
世上没有真正的感同身受
09-22 279
【代码】vue-aliplayer-v2 vue中默认静音设置。
Vue2 video播放器封装（支持七项功能）
w1426154928的博客
04-08 287
自己根据html原生的video播放器，在原有基础上封装了多项功能，包括①录制（含录制计时器）②截图③全屏放大④播放/暂停⑤倍速功能（样式需要自己写，我的样式写在了别的页面）⑥音量调节/静音⑦计算缓冲速度。npm install html2canvas (截图用到的插件)npm install RecordRTC （rtc录制插件）
video标签中使用muted后的视频静音问题
热门推荐
ourwheel的博客
03-03 2万+
问题发现 最近写一个简单的视频作为页面背景时，发现里添加muted才能播放视频，但是muted属性是默认让视频静音播放的，若想只用标签来解决视频的静音问题有些困难。 问题解决 最后的比较简单的解决方法是，在页面上添加一个控制是否静音的图标，然后用js写一个监听器，单击喇叭型图标，播放声音，再单击，图标转成静音图标，视频静音。 （也可以添加一个按钮button，在button里写一个函数来实现鼠标单...
Vue代码video不能播放视频的声音解决办法
Bearin的博客
12-19 1260
1.写的vue代码需要视频既能循环播放,又能播放声音。(二)Edge浏览器设置方法。(一)谷歌浏览器设置方法。2.然后需要设置浏览器。谷歌浏览器地址栏输入。
vue-video-play使用代码
weixin_36649795的博客
11-03 444
src: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' //自己对应视频流的url。playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度。type: 'application/x-mpegURL', // 类型。autoplay: true, // 是否自动播放。language: 'zh-CN', // 语言。
vue + typescript + video.js实现 流媒体播放 视频监控功能
10-16
视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。这篇文章主要介绍了vue + typescript + video.js 流媒体播放 视频监控,需要的朋友可以参考下
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中播放rtmp视频文件流的方法
10-14
主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue播放rtmp视频流
03-06
vue播放rtmp视频流（监控视频），pc端可用，
vue中用 video.js 实现单个页面内多视频播放.zip
02-19
vue中用 video.js 实现单个页面内多视频播放 1、index_v01.vue 实现单页面内多视频播放，如效果图； 2、index_v02.vue 实现单页面内多视频播放，可视区域内的视频播放，不在可视区域内的暂停。 以防止在视频量大的...
vue 项目中关闭弹窗后使video实现视频暂停播放
able_me的博客
08-06 7341
通过ref的使用得到video标签身上的属性及方法，然后加以控制，就实现了，最好在本地文件放一个小视频进行测试 实现思路： html代码 <video :src="videoUrl" controls="controls" style="width:400px;height:400px;" ref="vueRef"></video> javaScript的代码： this.video_url='视频源url地址' 判断是否暂停状态返回true false 如下： t
Vue基于ElementUI的Dialog实现弹窗登录，登录成功前不允许关闭
Creci的博客
06-12 7646
业务场景 当页面比较单一，只是个单页面的时候。 优点 简单粗暴 1.使用了session来记录登录是否成功，成功后不需要再登录； 2.使用最简单的方式，可以写死用户，不需要有后台服务，当然也可以修改代码从后台校验用户登录； 3.使用回调函数来强制用户不能点击空白处也不能关闭该登录窗口。 缺点 这里只是简单实现，不适合复杂业务场景 代码 新建一个vue组件，代码如下，把这个组件引入到你的页面，就会自...
element如何让table表格的横向滚动条一直显示,而不是要滚动到表格底部
Creci的博客
10-21 6354
给表格添加高度即可： <el-table :max-height="tableHeight" > 这个高度你也可以每次加载页面时动态计算 this.tableHeight = window.innerHeight - 290;
vue导航切换的简单实现
Creci的博客
04-16 2717
文中效果已在个人网站使用，欢迎大家访问 松果前端 效果图 HTML 代码总共8行，另外还需要自己写一些css样式就可以用了 <!--router-link组件支持用户在具有路由功能的应用中(点击)导航--> <!--headList为导航栏菜单数据的集合--> <!--item.to点击后跳转到的地址--> <router-link v-for=...
问题：npm install时，从github下载node-sass失败（https://github.com/sass/node-sass/releases/download/...相关报错）
Creci的博客
03-31 1020
问题：npm install时，从github下载node-sass失败 因为网络等原因正常下载失败 https://github.com/sass/node-sass/releases/download/... 解决方法 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ ...
解决：vue项目运行npm install报错 chromedriver_mac64.zip
Creci的博客
09-10 904
报错: vue项目运行npm install报错 Downloading https://chromedriver.storage.googleapis.com/2.27/chromedriver_mac64.zip 解决 npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 参考文档 vue项目运行npm install报错：Downloading https://chrom
VUE使用vue-video-player实现视频播放
最新发布
04-28
Vue是一种流行的JavaScript框架，用于构建用户界面。而vue-video-player是一个基于Vue的视频播放器插件，可以方便地在Vue项目中实现视频播放功能。 要使用vue-video-player实现视频播放，首先需要在Vue项目中安装该插件。可以通过npm或yarn来安装，具体命令如下： ``` npm install vue-video-player --save ``` 或者 ``` yarn add vue-video-player ``` 安装完成后，在Vue项目的入口文件（通常是main.js）中引入vue-video-player插件，并注册为全局组件。示例代码如下： ```javascript import Vue from 'vue' import VideoPlayer from 'vue-video-player' Vue.use(VideoPlayer) ``` 接下来，在需要使用视频播放功能的组件中，使用vue-video-player组件来实现。示例代码如下： ```html <template> <div> <video-player :options="playerOptions"></video-player> </div> </template> <script> export default { data() { return { playerOptions: { src: 'your_video_url', autoplay: false, controls: true, muted: false } } } } </script> ``` 在上述示例代码中，我们通过`playerOptions`对象来配置视频播放器的选项，其中`src`属性指定了视频的URL，`autoplay`属性指定是否自动播放，`controls`属性指定是否显示控制条，`muted`属性指定是否静音。 以上就是使用vue-video-player插件实现视频播放的基本步骤。你可以根据自己的需求进一步定制和扩展视频播放器的功能。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值