JSを書いているときにエラーが発生しています。
HTML5でVideoを画面いっぱいに表示されるページを作っています。
###発生している問題・エラーメッセージ
PCでは表示ができているが、iphoneで再生ボタンが表示されません。
http://the-beige.com/index2.html
以下記述を書くとiphoneで再生出来ません。
coverVid(document.querySelector('.mastheadvideo'), 640, 360);
###該当のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="http://stefanerickson.github.io/covervid/assets/styles/normalize.css" /> <link rel="stylesheet" href="http://stefanerickson.github.io/covervid/assets/styles/styles.css" /> <title>無題ドキュメント</title> </head> <body> <style> .video-btn { content: ""; position: absolute; top:0; left:0; right:0; min-height: 80%; min-height: 80vh; bottom:40px; /*コントローラー分下部に余白を*/ cursor: pointer; z-index: 2; } </style> <!-- Video Markup --> <section class="masthead"> <video id="mastheadvideo" class="mastheadvideo" onended="location.href='http://the-beige.com/tent/';" onclick="video_pause()" poster="movie_bg.jpg" autoplay controls> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening-1.mp4" type="video/mp4"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening.ogg" type="video/ogg"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening.webm" type="video/webm"> <source src="/movie.webm" type="video/webm"> <p>video要素がサポートされていないブラウザでご覧になっています。</p> </video> <!-- <video class="mastheadvideo" id="mastheadvideo" autoplay poster="http://the-beige.com/wp-content/uploads/2017/04/back_play.jpg" onEnded="location.href='http://the-beige.com/tent/';" onClick="video_pause()"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening-1.mp4" type="video/mp4"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening.ogg" type="video/ogg"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening.webm" type="video/webm"> <p>video要素がサポートされていないブラウザでご覧になっています。</p> </video>--></section><div class="video-btn" id="video-btn"></div>
</body> </html><!-- Load Scripts --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://stefanerickson.github.io/covervid/covervid.js"></script> <script src="http://stefanerickson.github.io/covervid/assets/scripts/scripts.js"></script> <!-- Call CoverVid --> <script type="text/javascript"> // If using jQuery // $('.masthead-video').coverVid(1920, 1080); // If not using jQuery (Native Javascript) coverVid(document.querySelector('.mastheadvideo'), 640, 360); //video要素の取得 var masthead = document.getElementById('mastheadvideo'); //videoボタンの取得 var video_btn = document.getElementById('video-btn'); //状態保存 var btn_status = 0; //画面クリックで再生・ポーズ video_btn.addEventListener('click', function () { if(btn_status === 0) { masthead.pause(); btn_status = 1; }else { masthead.play(); btn_status = 0; } }); </script>
###試したこと 以下記述を書くとiphoneで再生出来ません。 coverVid(document.querySelector('.mastheadvideo'), 640, 360); iphoneではクリックしたら通常の再生が始まれば問題ありません。 参考: http://www.shuwasystem.co.jp/blog/html5/html5-sample1.html
あなたの回答
tips
プレビュー