Vue中video标签如何实现不静音自动播放

由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放，也就是说如果想让video标签能够自动播放必须给video标签添加muted属性。

但是在开发的过程中我们需要用视频自动有声播放，比如一些学习网站，需要老师或同学进入页面就可以播放学习视频，那么如何去实现呢？

我是在Vue框架下实现的，其他框架仅供参考。

首先我们要让video标签能够自动播放，也就是让video标签静音条件下自动播放。

<video
  ref="videoPlayer"
  id="videoPlayer"
  class="video"
  width="100%"
  autoplay
  muted
  controls
  :src="addPre()">
</video>

然后是我们通过JavaScript的方式让video标签先取消静音然后再自动播放。

this.$nextTick(() => {
  this.$refs.videoPlayer.muted = false;
  this.$refs.videoPlayer.play();
})

此方法我只在Vue框架下尝试可以，在其他框架没有尝试。

此方法还需要注意的一点是如果此方法所在页面刷新或是从其他网站直接跳转到此页面则此方法就不管用了。

如果是刷新或者是外部链接跳转到此则会报如下错误：

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

这个错误的意思是：play() 失败，因为用户没有先与文档交互。

使用play方法之前用户必须得和文档（也就是页面进行）交互，刷新和从外部链接跳转都没有与页面进行交互。但是在Vue项目中从一个路由页面跳转到视频播放页面是可以的，这是为什么呢？

因为Vue是单页面富应用，虽然我们看上去页面是从一个页面跳转到另一个页面但是这些路由页面始终在同一个文档（页面）中，当我们点击实现路由跳转时就已经实现了与文档交互，所以不会报上面的错。

补充：video标签核心属性：

  • src 要播放的视频的 URL。
  • autoplay 如果出现该属性，则视频在就绪后马上播放。
  • controls 如果出现该属性，则向用户显示控件，比如播放按钮，进度条等。
  • height 设置视频播放器的高度。
  • width 设置视频播放器的宽度。
  • autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮,进度条等。
  • loop 如果出现该属性，视频播放结束会再次播放，即循环播放。
  • muted 静音播放。
  • poster 视频的封面图。
  • preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，该属性无效。

总结

到此这篇关于Vue中video标签如何实现不静音自动播放的文章就介绍到这了,更多相关Vue video标签自动播放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue使用video标签实现视频播放

    本文项目为大家分享了Vue使用video标签实现视频播放的具体代码,供大家参考,具体内容如下 项目需求:动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue-video-player 组件,其原因为 封装功能齐全.播放源兼容性好等. 通过这次项目需求,也深入的学习了 video 标签的属性及方法.具体在这里跟大家分享一下. 具体使用方法如下 <template> <!-- Video组件 --> <di

  • 基于vue的video播放器的实现示例

    当现有video播放器不能满足需求时,需要自己对video进行封装. video事件 loadstart: 在视频开始加载时触发,给currentTime赋值(历史播放记录或0). durationchange: 元信息已载入或已改变,视频的长度发生了改变.获取到视频长度(duration,并给currentTime赋值(历史播放记录或0)). playing: 在视频开始播放时触发(不论是初次播放.在暂停后恢复.或是在结束后重新开始). pause: 播放暂停时触发. timeupdate:

  • Vue中video标签如何实现不静音自动播放

    由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放,也就是说如果想让video标签能够自动播放必须给video标签添加muted属性. 但是在开发的过程中我们需要用视频自动有声播放,比如一些学习网站,需要老师或同学进入页面就可以播放学习视频,那么如何去实现呢? 我是在Vue框架下实现的,其他框架仅供参考. 首先我们要让video标签能够自动播放,也就是让video标签静音条件下自动播放. <video ref="videoPlayer" id="vide

  • Vue中Video标签播放解析后短视频去水印无响应解决

    Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • 详解vue中router-link标签所必备了解的属性

    to 表示目标路由的链接. 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象. <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home" rel="external nofollow" >Home</a

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • Vue中el-form标签中的自定义el-select下拉框标签功能

    Vue中el-form标签中的自定义el-select下拉框标签功能

    页面写死el-select下拉框标签: 通过v-for="item in stateArr"绑定,stateArr声明在Vue组件里面的data参数里面代码如下: 到此这篇关于Vue中el-form标签中的自定义el-select下拉框标签功能的文章就介绍到这了,更多相关Vue el-form标签 自定义el-select下拉框标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • Vue中transition标签的基本使用教程

    Vue中transition标签的基本使用教程

    目录 transition 标签 配合 animation 配合 transition transition-group 标签 动画库 animate.css 总结 transition 标签 transition 标签:Vue 的内置动画标签 作用:在 [插入] / [更新] / [移除] DOM 元素时,在合适的时候给元素添加样式类名(配合 CSS 样式使用,实现动画效果) 注意事项 transition 标签只能包含 1 个元素:如果里面写了多个元素,则只生效第一个 transition

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • Vue中自定义标签及其使用方式

    Vue中自定义标签及其使用方式

    目录 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入 申明使用 使用 整个代码 效果 问题 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否我们也可以自己编写并且调用呢? 这里我将要讲解我在自定义标签方面的使用. 需求 这里我想要建一个名叫:<test>的组件. 功能是:组成两个按钮,且两个按钮颜色不同. 注意:这里的组件名.功能都是可以自定义的,按自己需求来取舍. 自定义 创建组件的vue文件 我们更目录设置为s

随机推荐