在 Safari 的静音自动播放时调整视频音量

时间:2021-06-28 20:27:36

标签: javascript video safari html5-video autoplay

试图绕过 Safari 对 html5 视频的“静音”要求。在我的视频标签中保留“静音”属性 - 但在视频播放几秒钟后尝试使用 JS 设置音量。发生的事情是用户仍然必须按下音量按钮,然后默认音量才起作用 - 但真的想强制它自动将其推到 100% 或非静音。似乎我可能正在与 Safari 进行一场艰苦的战斗 - 但我想我会问任何其他 JS 开发人员他们是否已经成功完成了这项工作。

<video class="video__home" id="video__home" width="1920" height="960" onended="videoEnd()" preload="auto" autoplay playsinline muted controls>
      <source src="videos/home_pg.mp4" type="video/mp4">
      <source src="videos/home_pg.webm" type="video/webm">
      <source src="videos/home_pg.ogv" type="video/ogv">
      Your browser does not support the video tag.
      <script>
        function videoEnd() {
          console.log('The video has ended');
          $(".video__home").addClass( "hide" );
          $(".video__home__title").addClass( "hide" );
          $(".video__home__detail").addClass( "hide" );
          $(".video__home__btn").addClass( "hide" );
          $(".video__home__book").addClass( "hide" );
          $(".video__home__overlay").addClass( "hide" );
          $(".video__home__ending-text").addClass( "show" );
        };
        var _video = $('.video__home')[0], timeoutID;
        $(_video).on('playing', function(event){
          timeoutID = window.setInterval(function() {
          console.log("video is playing");
          document.getElementById("video__home").volume = 0.2;
        }, 10);
        }).on('ended', function(event){
          console.log("video ended");
          window.clearInterval(timeoutID);
        });
      </script>
    </video>

0 个答案:

没有答案