时间戳

首页 > 解决方案 > 在谷歌浏览器中自动播放

javascript - 在谷歌浏览器中自动播放

问题描述

我希望有人可以帮助我解决我的问题，我正在努力寻找代码以在谷歌浏览器中同时启用自动播放视频和音频？

这把silence.mp3也不再适用于chrome。

<iframe src="./images/silence.mp3" allow="autoplay" id="audio" style="display:none" id="iframeAudio"></iframe><iframe src="./images/silence.mp3" allow="autoplay" id="audio" style="display:none" id="iframeAudio"></iframe>
<audio autoplay loop id="video_bg_plays" class="myaudio">
    <source src="./images/Wizard101_audio.mp3?autoplay=1&loop=1&muted=0" type="audio/mp3" >
</audio>
<div id="video_bg">
    <div style="background:url('./images/bg2.png') no-repeat top center;z-index:-3;position:absolute;width:100%;min-width:310px;height:100%" class="js-bg-video"></div>

    <video autoplay muted loop  id="video_bg_play" class="hide viewer">
        <source src="./images/Wizard101.mp4?autoplay=1&loop=1&muted=0" type="video/mp4">
    </video>
		  <div class="player__controls">
       <!--<div class="progress">
        <div class="progress__filled"></div>
       </div>-->
       <button class="player__button toggle" title="Toggle Play">►&lt;/button>
       <!--<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-skip="-10" class="player__button">« 10s</button>
       <button data-skip="25" class="player__button">25s »</button>
     </div>-->
   </div>
</div>

标签： javascripthtmlgoogle-chrome

解决方案

我最近发现的唯一解决方法如下：

navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
    var vid = document.getElementById("video_bg_plays");
    vid.play(); // play your media here then stop the stream when done below...
  
    stream.getTracks().forEach(function (track) { track.stop(); });
});

它会询问用户他们的麦克风权限，他们必须单击允许一次，然后您才被允许播放任何有声音的东西。它之所以有效，是因为只要您正在捕捉，您就可以自动播放声音，而无需任何用户手势。

推荐阅读