html5で選択された動画を読込完了したら再生したい

Question

お世話になっております。

1.ランダムに動画が選択される
2.動画がブラウザに読み込まれる
3.読み込みが完了したら再生

というのを実装したいのですが、下記のようにコーディングしたところうまく活きませんでした。
ご存じの方いらっしゃいましたらお願いします。

【HTML】
        <div id="video_lay">
            <video></video>
        </div>

【JavaScript】

        var video_lay = $("div#video_lay");
        var video_file = video_lay.children("video");

        video_file.attr("src","video/"+ Random[1] + ".mp4");
        video_file.onloadeddata = function(){
            //レイヤー切り替え
            $("#normal_lay").css("display","none");
            video_lay.css("display","block");

            //動画再生
            var video = video_file.get(0);
            video.play();
        }

Comments

[kszk311]

HTML側もできれば記載してもらえますか

[kszk311]

video_layerというのが、どこで取得しているかがわからないです。

[maru]

追加しました。よろしくお願いします

[kszk311]

もしかして　1.ランダムに動画が選択される　ができてない感じですか？「Random」の配列の中身を教えてください。また、HTMLとJSで分離してコードを記載することができます。

[maru]

ランダムの方は既に出来ています。上記を実行すると、動画の一コマ目が表示されて、スタートがされません。video.start()が実行されるにはどうすればよいかがわからない状態です

[kszk311]

video.play()じゃなくてvideo.start()ですか？

[maru]

video.play()でした。失礼しました

[kszk311]

「video_layer」がやはりわからないです。　直前の「video_lay」のことを指していますか？

[maru]

あ、そうです「video_lay」のことです。実際のファイルでは両方共別の名前で一致しているのでこちらはvideo_layとしてお考え下さい

Answer 1

onloadeddataが実行されていませんでした。
video_fileの取得の箇所は、一つでいいと思うので$("video")にしちゃいましょう。

	var video_lay = $("div#video_lay");
	var video_file = $("video");
	video_file.attr("src","video/"+ Random[1] + ".mp4");
	video_file[0].onloadeddata = function(){
		
		//レイヤー切り替え
		$("#normal_lay").css("display","none");
		video_lay.css("display","block");

		//動画再生
		var video = video_file.get(0);
		video.play();
	}