JavaScriptでvideoの再生について

Question

JavaScriptでvideoの再生をしたいのですが
JavaScriptから画像をクリックしたときにvideoの再生ができません。
htmlに記載しているボタンをクリックしたときには希望通り
videoの再生はできています。

コンソールに
Uncaught TypeError: Cannot read property 'play' of null
とエラーの表示があり調べましたが理解できませんでした。
関数の呼び出し方が間違っているのでしょうか？

var v = document.getElementById("bg-video");

function playVideo() {
	//動画を再生
	v.play();
	//現在の再生位置（秒）を表示
	v.addEventListener("timeupdate", function () {
		document.getElementById("ichi").innerHTML = v.currentTime;
	}, false);
}
window.onload = function () {		
   var game = new Game(400, 500);  

	game.onload = function () {
            //省略
	    Img.ontouchend = function () {	
            playVideo();
        }
    }
}				

    <div class="video-container">
        <video id="bg-video" src="sample.mp4"></video>
        <div class="video-sidebar">
            <center>
                <iframe src="game.html" width=" 400" height="500" scrolling="no" marginwidth="0" marginheight="0"
                    frameborder="0" style="border:none;"></iframe>
            </center>
        </div>
    </div>
    <div style="width:400px; background-color:#333333; color:#ffffff;">
        <input type="button" value="再生" onClick="playVideo()">
        <input type="button" value="一時停止" onClick="pauseVideo()"><br>
    </div>

Answer 1

DOM ツリーの構築が完了する前に、
var v = document.getElementById("bg-video") が実行されてるのが原因で bg-video が見つからず、変数 v の中身が null になっているのだと思います。
DOMContentLoaded か load のタイミングで var v = document.getElementById("bg-video") を実行するようにしましょう。

それと、window.onload = ...のような書き方は副作用が大きいので、window.addEventListener を使うべきです。

function playVideo(v) {
    //動画を再生
    v.play();
    //現在の再生位置（秒）を表示
    v.addEventListener("timeupdate", function () {
        document.getElementById("ichi").innerHTML = v.currentTime;
    }, false);
}

window.addEventListener('DOMContentLoaded', function() {
  var v = document.getElementById("bg-video");
  var game = new Game(400, 500);  

  game.onload = function () {
    //省略
    Img.ontouchend = function () {    
      playVideo(v);
    }
  };
}, false);

Comments

[bluedog]

回答ありがとうございます。
記載いただいたコードを試してみましたがうまく動作できませんでした。
エラーは変わらずです。
別の方法で考えてみます。