Vue代码video不能播放视频的声音解决办法

最新推荐文章于 2024-06-26 15:56:50 发布
最新推荐文章于 2024-06-26 15:56:50 发布
阅读量1.6k 收藏 7
点赞数 9
文章标签： vue.js 音视频 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bearin/article/details/135090719
版权

1.写的vue代码需要视频既能循环播放,又能播放声音

//循环播放
:loop="true"
//自动播放
:autoplay="true"

需要声音进行播放时,下面这行代码不要加 

//非静音播放,需要有声音是这行代一定不要加
:muted="false"

2.然后需要设置浏览器

(一)谷歌浏览器设置方法 

谷歌浏览器地址栏输入

chrome://settings/

chrome://settings/content/sound

(二)Edge浏览器设置方法 

地址栏输入

edge://settings/profiles

edge://settings/content/mediaAutoplay

Bearin
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue——video标签实现不静音自动播放
weixin_45566730的博客
08-25 1万+
video标签在单页面富应用中实现有声自动播放
vue项目中自定义video视频控制条的实现代码
10-15
在Vue项目中，自定义video视频控制条是一个常见的需求，以提供更加个性化和美观的用户体验。下面我们将详细探讨如何实现这一功能。 首先，我们需要在HTML结构中包含`<video>`标签，以及用于显示自定义控制条的元素...
安卓App使用video视频播放画面正常显示，但是没有声音？
qq_43358160的博客
11-01 2235
有可能不是组件的问题，而是音频编码的问题，把音频编码换成aac试一下
开发摄像/监控的项目，vue，控制video自动播放，同时设置声音自动关闭
最新发布
THY0827的博客
06-26 353
muted //声音自动关闭。autoplay //自动播放。
vue-video-player有画面没声音_电视盒子没声音？问题都在这了！
weixin_39742568的博客
11-25 1481
最近，小智身边有朋友遇到了这样一个问题：电视盒子在连接电视机后播放视频，却没有声音。这是怎么一回事？一般情况下，我们要检查下在连接电视或者盒子时，连接线是否出现了差错。一、AV线连接电视1. 检查AV复合线线序是否与电视接口一一对应。(官方标配AV线，红色和白色插头为音频插头，黄色插头为视频插头。)这里要注意的是，市面上的AV线也许与盒子定义不同，所以请将插入电视的三个插头调换位置。2....
vue-video-player有画面没声音_一起来吐槽？2K21 次时代真实游戏画面曝光
weixin_39652136的博客
11-25 533
先来看几张图这是2K官方发布的 2K21次时代真实游戏画面宣传片，在PS5上演示。先奉上宣传片一睹为快，感受下这些精致的建模与游戏动作的流畅程度。每年2K发布新游戏，大家都会吐槽。吐槽的点主要有两个：1、做做面部，加点汗水细节，就当新游戏卖了，钱真好挣。2、游戏动作不真实，衔接性不够高，经常不合理的失误。后卫还没中锋快，随便人堆里运两下就失误。脚踝哥好久没玩2K了，但之前还是经常玩的。...
Vue实现video视频倍速播放、调节声音、拖动进度条、生成智能字幕等
Sunnyztg的博客
06-26 9972
在现代化的网站中，视频播放已经成为了不可或缺的一部分。而对于视频播放的需求也越来越多样化，比如倍速播放、调节声音、拖动进度条、生成智能字幕等。本文将介绍如何使用Vue实现这些功能。
Vue中 引入使用 vue-video-player 实现音视频播放_vue-video-player 音频随系统变更(1)
2401_84618926的博客
05-08 333
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】src: '', // 路径type: 'video/mp4' // 类型],poster: “”, // 封面地址notSupportedMessage: ‘此视频暂无法播放，请稍后再试’, // 允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
vue3播放音频
hello，word！
11-22 2153
使用 autoplay 标签和主动调用 play 方法`document.querySelector('video').play()`都会提示此错误。报错：Error: Uncaught (in promise) DOMException: play() failed。根据 Chrome 的规则，要想使用autoplay自动播放只能加上。在vue3中实测只需点击页面内 程序才能自动调用播放。静音属性就允许自动播放了。
vue + typescript + video.js实现 流媒体播放 视频监控功能
10-16
`videojs-flash`是video.js的一个插件，用于在支持Flash的环境中播放视频。 然后，创建一个`video_player.vue`组件。这个组件的核心是video.js的集成，它会使用video.js初始化视频播放器。在`mounted`生命周期钩子...
vue视频播放暂停代码
10-16
本文将详细介绍如何在Vue中控制视频的播放与暂停，并提供相应的代码示例。 首先，Vue.js允许我们在模板中直接使用HTML元素，因此可以使用`<video>`标签来插入视频。在HTML部分，我们可以这样定义一个视频元素： ``...
Vue结合Video.js播放m3u8视频流的方法示例
10-18
这篇文章主要针对如何在Vue项目中结合Video.js库实现m3u8视频流的播放，以及如何进行视频清晰度的切换。 首先，要实现这一功能，需要在Vue项目中安装Video.js和videojs-contrib-hls这两个npm包。通过npm安装这两个...
vue实现静音播放video标签（视频/视频流）
Creci的博客
01-13 5107
可以通过控制音量来解决该问题 通过volume 属性把音量降到0 html代码 示例代码测试环境为播放视频流,视频流使用js加载到video标签中，相关代码没有贴出 <video id="localVideo" ref="localVideo" autoplay playsinline> </video&g...
h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理(获取当前浏览器做一下逻辑处理)
essnbb的博客
09-08 1998
像h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理
Vue-vedio实现自定义自动播放
eqizhihui的博客
08-24 1207
一般情况下，vedio标签自动播放只需要添加autoplay属性即可，添加autoplay属性的vedio，视频在就绪后就马上播放。最终想法：动态控制control，点击按钮后直接使用play()方法让vedio播放。需求描述：添加一个播放按钮，在点击按钮后按钮消失，视频自动播放。测试结果：点击后按钮消息，但视频没有自动播放。初步想法：动态控制autoplay属性。
Electron 3 不能自动播放音频
demon的专栏
12-19 3459
Electron 3 audio not allowed before user interaction with the page (Chrome 66 autoplay policy) #13525 问题 使用 Electron打包的应用不能自动播放音频文件。 问题的起源 Chrome 66 之后更新了，自动播放的策略以提供更友好的交互体验。 解决方法 app.commandLine.app...
微信小程序live-pusher和video一起使用为什么有的手机video有视频画面但是没有声音
肖肖肖丽珠的博客
05-05 1226
live-pusher开启的时候看到右上角有个话筒。应该是启用了麦克风。录制的时候会把你的声音录下来，这就和video的声音冲突了 解决办法就是关闭这个录屏的功能enable-mic <live-pusher enable-mic="{{false}}" /> ............
vue-video-player有画面没声音_成功电影不可或缺的后期制作——电影声音制作
weixin_39969028的博客
12-04 2249
“”在大家沉浸于光影世界时经常被忽略的东西——电影的声音。相信大家在看电影的时候很少去关注电影的声音(特别震撼的BGM除外)，观影过程中出现的每个声响你都不觉得突兀，却很少有人知道，这些声音里面至少有60%从来没在拍摄现场出现过。今天我将给大家带来一部电影不可缺少后期制作——电影声音制作。电影声音制作分为两大部分，同期和后期。影视同期声1所谓同期声，是指拍电影电视剧时，演员边拍戏边录音，...
如何处理video标签不静音自动播放
weixin_66198432的博客
05-22 1687
对于video标签的自动播放问题，我们可以使用muted属性进行静音播放，通过JavaScript控制播放行为，或者监听用户的交互事件来决定是否播放视频。我们可以使用video标签提供的play()和pause()方法，在需要播放视频时手动调用play()方法，而不是让其自动播放。通过在video标签中添加muted属性，视频就会默认静音播放，避免了自动播放时的突兀声音。通过监听用户的交互事件，如点击、滚动或滑动等，我们可以在用户主动与网页进行交互时再播放视频，从而避免了自动播放的尴尬。
vue使用video.js播放视频
12-28
在Vue项目中使用video.js播放视频，可以按照以下步骤进行： 1. 首先，安装video.js和video.js的CSS样式文件。可以使用npm或者yarn进行安装： ```shell npm install video.js npm install video.js/dist/video-js.css ``` 2. 在Vue项目的入口文件（例如main.js）中，引入video.js和video.js的CSS样式文件，并将video.js注册到Vue的原型上： ```javascript import Vue from 'vue' import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video ``` 3. 在需要使用video.js播放视频的组件中，可以通过`this.$video`来访问video.js的功能。例如，在一个视频播放组件中，可以使用以下代码来初始化和播放视频： ```javascript export default { mounted() { // 获取video标签 const videoElement = this.$refs.video // 使用video.js初始化视频 const player = this.$video(videoElement) // 设置视频源 player.src('path/to/video.mp4') // 播放视频 player.play() } } ``` 请注意，上述代码中的`$refs.video`是一个ref属性，用于获取video标签的DOM元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值