reveal.jsで背景動画を自動再生したい(モバイル端末で)
reveal.jsでスライドを作っていましたが,背景をmp4の動画で自動再生するために,スライドのsectionに公式通り以下のように書きました.
html
1<section data-background-video="img/movie.mp4,img/movie.webm" data-background-video-muted data-background-video-loop data-background-opacity="0.3" playsinline>
すると,PCのchrome等で普通に再生されますが,iPhone等のモバイル端末だと何も表示されません.
公式には,
「playsinlineを書くとモバイルでも動く(safariで検証済み)」
といった感じで書かれていたので,playsinlineを書いたのですが変わらず…
playsinlineの書き方がまずいのか,そもそもできないのか.ご教授いただける方はいませんか…?
videoタグに関するもので,
- muteにしなければならない
- playsinlineを書かなければならない
などあったので,reveal.js公式の通り,data-background-video-mutedにしたのですが…
やはりdata-background-imageでGIFを選択するしかないんでしょうか…
reveal:3.9.2
最初のスライド作成はreveak-ckで行い,その後のカスタムはhtmlで行っています.
reveal.jsの該当箇所
3862行目あたりです.
JavaScript
1 // Inline video playback works (at least in Mobile Safari) as 2 // long as the video is muted and the `playsinline` attribute is 3 // present 4 if( isMobileDevice ) { 5 video.muted = true; 6 video.autoplay = true; 7 video.setAttribute( 'playsinline', '' ); 8 }
あなたの回答
tips
プレビュー