Reveal.js: data-background-video does not work with safari or chrome from iPhone or iPad

Created on 25 Nov 2015  路  8Comments  路  Source: hakimel/reveal.js

Hi,
i work with 3.2 version and when i use "data-background-video" section's tag, the video works fine in desktop but, when i see the slide with iPhone or iPad, the videos not appears. This issue happens either chrome or safari.

bug

All 8 comments

+1
Same for me

Same for me. Was able to get it working on Android by muting the video but still no success for autoplay on iOS on Chrome or Safari.

I submitted a fix for this in pull request #1851

+1 Background videos does not play in Chrome/Firefox for Android
Sometime just plays the first video frame. This is possible disabling the transition effect, but in other case the background video does not play at all

Android Version: 4.4.4
Chrome version: any
RevealJs version: 3.4.1

@robertop87 have a look at my pull request #1851 and see if adding those attributes fixes your issue.

@astone123 I tested your changes with Android+Chrome, the video is still not playing, just shows the first frame.
The new after applied your PR is:
The logs shows the next:

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture

Looks it's a restriction from Chrome, do you know something?

@robertop87 make sure that you added the data-background-video-muted attribute to the slide where you have the background video. Videos with audio will usually not autoplay on mobile browsers without a user gesture.

Does not works adding the muted property, but I Disabled the "gesture requirement for media playback" on my Chrome, and now it's working fine.

  1. Go to chrome://flags
  2. Disable "Disable gesture requirement for media playback"
  3. Refresh and it's working fine.

I did not apply the changes for this PR.

Based on: http://android.stackexchange.com/questions/59134/enable-autoplay-html5-video-in-chrome

Should be fixed in #1851.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sundorf picture sundorf  路  5Comments

justmytwospence picture justmytwospence  路  4Comments

togakangaroo picture togakangaroo  路  4Comments

Seth-Gecko picture Seth-Gecko  路  4Comments

gre picture gre  路  5Comments