Rails error: Autoplay is only working sometimes for video_tag

自闭症网瘾萝莉.ら 提交于 2020-08-10 03:44:14

问题


I'm using Carrierwave to upload video files and have both autoplay and loop set to true for my video_tag. The video plays automatically after uploading it initially but only shows the first frame of the video after I've refreshed the page.

Source for video_tag:

video_tag post.video_url.to_s, autoplay: true, loop: true, class: :standard_post_video

https://github.com/ethanwilkins/simplr/blob/2c07884d153192566ded30bd020c06237747f401/app/views/posts/_card.html.erb#L87

I'm also using Nginx and Unicorn. Thanks!


回答1:


Simply add

muted: 'muted'

in video_tag

video_tag post.video_url.to_s, autoplay: true, loop: true, muted: 'muted', class: :standard_post_video

See Docs: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Chrome's autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:

    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning
    • the user has previously play video with sound.
    • On mobile, the user has [added the site to their home screen].

    • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.




回答2:


Adding muted: "muted" to my video_tag allowed me to check if the video is playing and then call play() if necessary. This resolved my issue:

    <%= video_tag post.video_url.to_s, autoplay: true, loop: true, muted: "muted", class: :standard_post_video, id: "standard_post_video_#{post.id}" %>
    <script>
      var video = $('#video').get(0);
      if (video.paused) {
        video.play();
      }
    </script>

Commit: https://github.com/ethanwilkins/simplr/commit/4eea13ee610b4744f555cfba3696da6ac492b622



来源:https://stackoverflow.com/questions/55504291/rails-error-autoplay-is-only-working-sometimes-for-video-tag

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!