Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记

问题代码

<!--这里的muted绑定不起作用-->
<audio :muted="isMuted" ref="audioPlayer"></audio>

援引Github上的issue回复

翻译：muted属性类似于<input>的value属性，如果他在元素初始化时是内联的，那么属性值将作为初始值；但是如果在一开始并没有内联，只是后续更改了attribute ¹ 值，那么将不会起任何效果，正确的做法是设置相对应的property ¹ 值。

解决方式：使用watch来手动设置muted

html

<audio ref="audioPlayer"></audio>

javascript

watch:{isMuted(val){if(val){this.$refs.audioPlayer.muted = 'muted'}else{this.$refs.audioPlayer.muted = ''}}
}

以上

关于attribute和property值的区别，可以看我往期的文章。 ↩︎ ↩︎

Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记相关推荐

vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
html ios音乐自动播放muted,video下autoplay属性无效的解决方法(添加muted属性)
背景:video下载入ogg格式视频,并设置自动播放属性autoplay,但是使用Chrome预览时,视屏画面已加载出来,但是无法自动播放,F5刷新后可以自动播放.使用火狐浏览器可以自动播放.最初代码 ...
HTML5 Audio/Video 标签,属性,方法,事件汇总（转）
2019独角兽企业重金招聘Python工程师标准>>> <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放c ...
vue绑定html的class属性的方法
一.对象语法绑定class属性 class的属性代码如下 <style type="text/css">.red{color: red;width: 100px;hei ...
vue绑定自定义属性（属性值:false），DOM不显示问题
(案例+截图 )vue绑定 :data-zidingyi="response.false" 之后,页面DOM 不显示正确的代码: <section v-for=" ...
vue中使用video标签播放FLV总结
Audio/Video 标签属性及自定义(进度条.播放.快进.全屏) - SeaJson - 博客园 (cnblogs.com) //全屏按钮video::-webkit-media-controls ...
Vue如何使用video标签实现视频播放
Vue如何使用video标签实现视频播放具体内容如下 **项目需求:**动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue ...
vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...
【HTML5】 Audio/Video全解（集合贴）
[HTML5] Audio/Video全解(集合贴) 2015-03-17 chenh_doc 目录[-] 一.标签解读二.Media对象方法和属性三.Media JS事件四.浏览器对音视频格 ...

Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记

问题代码

援引Github上的issue回复

解决方式：使用watch来手动设置muted

Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记相关推荐

最新文章

热门文章