• 締切済み

jqueryのonclickでvideoタグ挿入

通常、ページ内にHTML5のvideoタグを挿入するとロード状態で動画がダウンロードされるかと思います。 動画をみない人にとっては必要のないデータとなるのでjqueryまたはjavascriptを利用して以下のように動作させたいと思っています。 (1)ページロード時は動画のダウンロードをしない。 (2)ページ内の【動画を再生】ボタンを押すと動画のダウンロードを開始する。 (3)上記動作と同時にvideoタグで再生する。(ページ遷移はしない) ※(3)はユーザビリティの観点から対応できればと思っています。 各ページに多くの動画を利用しているので、閲覧しているユーザーにストレスのかからない方法を探しています。 どうぞよろしくお願いいたします。

みんなの回答

  • hymat
  • ベストアンサー率58% (95/162)
回答No.1

<!DOCTYPE html> <html lang="ja"> <script> function play() { document.getElementById('div1').innerHTML='<video id="video1"><source src="sample.mp4"></video>'; document.getElementById('video1').onclick=function(){if(this.paused){this.play();}else{this.pause();}}; document.getElementById('video1').play(); } </script> <div id="div1"> <input id="button1" type="button" value="play" onclick="play();" /> </div> </html>

関連するQ&A