h5自动播放视频且有声音的办法

最新推荐文章于 2024-04-15 17:19:46 发布
最新推荐文章于 2024-04-15 17:19:46 发布
阅读量2.9k 收藏 8
点赞数 1
分类专栏： 原生 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38359034/article/details/119949865
版权

视频自动播放autoplay无法播放需要静音，setTimeout0.1后执行点击一次，隐藏掉播放按钮

<body>
    <button onclick="playPause()" id="buttonid" style="display: none;">播放/暂停</button> 
    <video src="QQ视频20210827100340.mp4" controls="controls" id="video1">
        your browser does not support the video tag
        </video>
</body>
<script type="text/javascript">
   var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 
	function makeBig()
{ 
	myVideo.width=560; 
} 
	function makeSmall()
{ 
	myVideo.width=320; 
} 
	function makeNormal()
{ 
	myVideo.width=420; 
} 
setTimeout(function(){ 
    document.getElementById("buttonid").click();
 }, 0.1);
</script>

抚月
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
H5网页播放rtmp实时视频流，网页直播
10-09
H5网页播放rtmp实时视频流，网页直播 解决延迟问题，心跳监测播放过程中error自重启 直接放入页面运行
html音乐无播放器静音,html5中设置或返回音频/视频是否应该被静音的属性muted
weixin_42613583的博客
06-03 294
实例关闭视频的声音：myVid=document.getElementById("video1");myVid.muted=true;定义和用法muted 属性设置或返回音频/视频是否应该被静音(关闭声音)。浏览器支持所有主流浏览器都支持 muted 属性。注释：Internet Explorer 8 或更早的浏览器不支持该属性。语法设置 muted 属性：audio|video.muted=tr...
js 浏览器的自动播放策略
最新发布
pig_ning的博客
04-15 787
js 浏览器的自动播放策略
html5播放器 静音,html5中设置或返回音频/视频是否应该被静音的属性muted
weixin_35706991的博客
06-10 1018
实例关闭视频的声音：myVid=document.getElementById("video1");myVid.muted=true;定义和用法muted 属性设置或返回音频/视频是否应该被静音(关闭声音)。浏览器支持所有主流浏览器都支持 muted 属性。注释：Internet Explorer 8 或更早的浏览器不支持该属性。语法设置 muted 属性：audio|video.muted=tr...
video标签中使用muted后的视频静音问题
热门推荐
ourwheel的博客
03-03 2万+
问题发现 最近写一个简单的视频作为页面背景时，发现里添加muted才能播放视频，但是muted属性是默认让视频静音播放的，若想只用标签来解决视频的静音问题有些困难。 问题解决 最后的比较简单的解决方法是，在页面上添加一个控制是否静音的图标，然后用js写一个监听器，单击喇叭型图标，播放声音，再单击，图标转成静音图标，视频静音。 （也可以添加一个按钮button，在button里写一个函数来实现鼠标单...
【h5 video】 播放与暂停 静音与取消静音
Khun_HWJ的博客
08-13 1万+
我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。我的代码是这样的： $('#playMovie1').click(function(){ $('#movie1').play(); }); 但发现这样不行，而用以下的js是可以的：document.getElementById('movie1').pl...
h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理(获取当前浏览器做一下逻辑处理)
essnbb的博客
09-08 1872
像h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理
移动端H5自动播放视频
不定时分享最优质的网络技术与教程，满满的干货。
12-27 1240
可能是出于节省用户流量，许多移动端浏览器都不支持H5自动播放视频，必须在用户主动交互（点击或者滑动等）后才可以通过js播放视频PC端可以通过设置muted，自动播放静音视频安卓浏览器均不支持自动播放，实测在微信内置浏览器，滑动视为交互行为，可以在这之后播放视频，抖音内置浏览器则需要点击交互，鸿蒙系统浏览器可以自动播放静音视频\
关于H5页面音视频在微信和app下自动播放
weixin_30647065的博客
10-20 371
H5页面音视频自动播放 现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？ 纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。这样做主要是为了防止不必要的自动播放浪费流量。 以下代码是实现用...
H5实现视频自动播放并且有声音
weixin_45316408的博客
06-03 1万+
最近开发了一个项目 需求是
解决谷歌浏览器无法自动播放HTML文件的声音和视频问题的方法
weixin_44566194的博客
03-15 6433
解决谷歌浏览器无法自动播放视频和声音的方法
HTML5页面音视频在微信和app下自动播放的实现方法
09-28
现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？下面小编给大家带来了HTML5页面音视频在微信和app下自动播放的实现方法
H5视频播放插件.zip
06-19
随着H5的兴起，传统的C/S构架产品逐步迁移到B/S架构上，但是H5的版本演进一直没能很好的解决实时视频播放的问题，从HLS到WebRtc 再到 Wasm 都伴随着它的问题， HLS延迟大满足不了实时流性要求; WebRTC 复杂以及更...
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例
12-16
实现html页面背景音乐自动播放，右上角增加播放图标状态显示，支持暂停，使用最新微信JDK支持微信内打开自动播放功能
一个移动端H5Video标签播放视频的实现
08-11
一个移动端 H5 Video 标签播放视频的实现
html5 ios 静音,h5 video ios播放过程中静音没有效果
weixin_35977444的博客
07-02 1015
如下的例子，在安卓手机上可以正常的播放、暂停、开启声音，关闭声音，但是在苹果手机上，关闭声音无效，通过setAttribute也没有效果，请大家帮忙看看，在线急等例子代码如下videohtml{font-size: 100px;}button{line-height: 40px;font-size: 30px;}开始播放静音var video = document.getElementById('...
HTML5新特性
m0_47907048的博客
11-01 127
HTML5新特性 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”> </div> <div class=“conten
html5中video自动播放,H5：设置video自动播放
weixin_39957027的博客
05-30 2941
HTML：注意这里的 muted ，如果不加的话，在普通的浏览器当中是不会自动播放的，但是存在缺陷，自动播放的话会默认静音。在之前的项目里，我这里的界面是用web-view嵌套在微信小程序使用的，所以就将 muted 去掉了，然后通过微信的 WeixinJSBridgeReady 方法来唤起video的自动播放，可以实现有声播放。JS：autoPlayAudio("myVideo");funct...
如何实现h5视频自动播放
07-15
为了在 H5 视频中实现自动播放，你需要遵循以下几个步骤： 1. 静音视频：大多数浏览器要求在自动播放视频时将其静音，以提供更好的用户体验。所以，你需要将视频静音。添加 `muted` 属性到 `<video>` 标签中，例如：`<video src="video.mp4" muted></video>`。 2. 用户交互：大多数浏览器要求在自动播放视频之前进行用户交互。你可以使用 JavaScript 在页面加载后触发播放按钮或其他用户交互事件。 3. 自动播放：使用 JavaScript 在用户交互事件中调用 `play()` 方法来启动视频的自动播放。你可以通过获取 `<video>` 元素的引用，并调用 `play()` 方法来实现。示例代码如下： ```html <button id="playButton">点击播放</button> <video src="video.mp4" id="myVideo" muted></video> <script> const playButton = document.getElementById('playButton'); const video = document.getElementById('myVideo'); playButton.addEventListener('click', function() { video.play(); }); </script> ``` 在上述代码中，我们创建了一个按钮 `playButton` 用于触发视频的自动播放。当用户点击按钮时，我们通过获取 `<video>` 元素的引用并调用 `play()` 方法来启动视频的自动播放。 请注意，由于浏览器的限制，自动播放仍然需要用户与页面进行了交互。用户可以通过点击按钮来触发视频的自动播放。 通过以上步骤，你可以在 H5 视频中实现自动播放。请确保遵循浏览器的自动播放策略，并提供良好的用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值