TOPページにアクセスする度に、ランダムな動画を再生させたい

前提・実現したいこと

今後も動画をいくつか追加していく予定で、誰が観てもわかりやすい形をと思い、
動画ファイルに乱数を設定して呼び出すのではなく、
<video>XXXXXX</video>
と、まるごと呼び出せればと思います。

<<2020/06/19追記>>
再生される動画は、自動的に画面最大化にする（id="js-video" で適用)
スマホでも同様でも再生されるようにする（画面は上下に合わせて、左右は切れても良い）

発生している問題・エラーメッセージ

動画が再生されない

html

<div id="random_content"></div>

Script

<script>
  var elements = [
'<video autoplay loop muted playsinline poster="movie/movie01.jpg" id="js-video" class="mainVisualFullScreen_video">
  <source src="movie/movie01.mp4" type="video/mp4">
</video>',
'<video autoplay loop muted playsinline poster="movie/movie01.jpg" id="js-video" class="mainVisualFullScreen_video">
  <source src="movie/movie02.mp4" type="video/mp4">
</video>',
'<video autoplay loop muted playsinline poster="movie/movie01.jpg" id="js-video" class="mainVisualFullScreen_video">
  <source src="movie/movie03.mp4" type="video/mp4">
</video>',
'<video autoplay loop muted playsinline poster="movie/movie01.jpg" id="js-video" class="mainVisualFullScreen_video">
  <source src="movie/movie04.mp4" type="video/mp4">
</video>'
  ];
  var randElm = elements[Math.floor(Math.random() * elements.length)];
  $('#random_content').html(randElm);
</script>

補足

参考にしたサイト：
https://teratail.com/questions/34499
https://teratail.com/questions/86211
https://kakedashiweb.site/archives/1404

kei344

2020/06/18 11:07

参考サイトのURLが適切でないので修正してください。また、URLにはリンクを張ることができますので、編集よろしくお願いします。

行動規範の内容に同意します

回答3件

文字列リテラルを改行することはできません。

長い文字列リテラル | String - JavaScript | MDN

投稿2020/06/18 09:38

Lhankor_Mhy

総合スコア36115

HPELITEX2

2020/06/19 01:12

ご回答ありがとうございます。ご回答いただいた通り、改行せず文字列をつなげることで正常に動作しましたただ、 id="random_content"とHPに元々設定してあったID＝js－video（おそらく画面を引きのばすstyle）と競合してか、画面全体に反映されなかったようです。なにか別作を考えます。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

後で配列変数使わないなら、配列定義する必要全くないと思います。

javascript
1// ランダム数値を取得
2const randNum = Math.floor(Math.random() * 4) + 1;
3// video要素を生成
4const videoElm = document.createElement('video');
5// videoの各種設定
6videoElm.autoplay = true;
7videoElm.loop = true;
8videoElm.muted = true;
9videoElm.playsinline = true;
10videoElm.poster = `movie/movie0${randNum}.jpg`;
11videoElm.id = 'js-video';
12videoElm.type = 'video/mp4';
13videoElm.classList.add('mainVisualFullScreen_video');
14
15// sourceの生成と設定
16const sourceElm = document.createElement('source');
17sourceElm.src = `movie/movie0${randNum}.mp4`;
18
19// videoにsource入れ込み
20videoElm.appendChild(sourceElm);
21
22$('#random_content').html(videoElm);