Videoタグ 埋め込み動画の事例

種類や容量

ネットで調べると５ﾒｶﾞﾊﾞｲﾄ(MByt)以下、できれば３MByt等の記載がありました。よって容量を抑えるためにフルスクリーンは諦めることにしました(このような内容のページをＰＣ等の大画面のフルスクリーンで閲覧する人は少ないと思います）。

◆ここで使用しているファイルを下に示します。

１、使用しているビデオ形式 (詳細 1-1)

◆mp4形式とwebm形式の２種類を使っています。

２、尺（秒） / サイズ幅×高さ（px) / 容量(MByt)

◆30秒 / 幅:1002px × 高さ:564px / mp4:3.42MByt webm:3.46MByt

　(上記は音源入りのファイルで、無くせば容量は減らせます)

編集事例

１、基本映像

アフターエフェクトで 中央の光/基本の文字部/無数の星/空の明暗等 を作成しました。

◆完成後に MP4 H264 で基本映像ファイルとして出力しました。

２、基本映像の編集

前述の基本映像にAdobe プレミアにて音源の 波の音/鳥の声/下手なギター を載せ、MP4 / WEBM のそれぞれの形式で軽量化を図り書出しました。

◆ ◆ 注意　◆ ◆

プレミアには、 webm 形式の出力無くプラグインをインストールしました。ググれば簡単に見つかり且つ簡単にインストールできました。但し自己責任でお願いします。

軽量化の方法

◆ここでの紹介は アドビ プレミア 限定となります。

ファイル出力時は ファイル ⇒ 書出し ⇒ メディア　を選択しますね。(参考図 fig-1)

１、書出し設定(参考図 fig-2)

ここでは、 mp4 や WEBM のファイル形式と出力先を都度設定しますね。

２、画面サイズの調整(参考図 fig-3)

ここでの設定はビデオ表示の際の縦横サイズ（アスペクト比）となります。

◆ ◆ 重要　◆ ◆

サイズの変更時には必ずアスペクト比を合わせることが重要です。違った場合はブラウザーに表示の際おかしなスペースができてしまいます。

３、ビッドレートの設定(参考図 fig-4)

目的のファイルの軽量化はこの画面となります。画面は右のスライドバーを下げると出てきますよ。

そして、画質とファイル容量の戦いになります。都度数値を記録しておくことも大切だと思います。お好みに合わせ書き出します。

HTML の内容

この節では、html の内容と表示構想についての説明です。

 <!--*** ビデオ設定部　表示部ではない　*********-->
 <video poster="./img/index/dvdsun.jpg" aria-busy="false" id="bgvid" playsinline autoplay loop>
   <source src="./img/index/yoshiworld01.webm" type="video/webm">
   <source src="./img/index/yoshiworld01.mp4" type="video/mp4">
 </video>
 <!--****ビデオ表示部***-->
 <div id="article-video-area">
 <!--****ビデオ表示部内に設置の　スタート/ストップボタン部-->
   <div class="video-img">
    <img src="./img/index/kara2.png" alt="thank you'">
  </div>
  <div id="video-msgon">
    <img src="./img/index/thankyou.png" alt="thankyou watch the video">
  </div>
  <div id="video-msgoff">
    <img src="./img/index/pleasewatchthevideo.png" alt="please watch the video">
  </div>
  <div id="videonav-btn">
    <p>[音楽/ビデオ]再生　⇒　[Video-Paused]</p>
    <button id="videobtn">Video-Paused</button>
    <p>下手くそなギターもYoshiの世界のひとつですよ！</p>
  </div>
</div>

video タグ

◆(２～５行) video のタグ指定部で、ビデオの表示方法やビデオファイルの指定を行います。

◆各プロパティ等の詳細は（右列 ビデオ プロパティ　詳細１）を参照してください。

重要　音源付ビデオの自動再生時には Google Chrome等はビデオタグにミュート(muted）が必要ですね。

　記入例(2行目後半)　... playsinline autoplay muted loop

しかしここでは muted の指定はしません。Yoshiは動画に音源は非常に重要だと思っています。

◆Javascript で 再生/停止 制御用の ID 属性 bgvid を指定しています。

2行目ではミュートの指定をしていません。ブラウザーにより無効化された場合には、再生ボタンを押すことで再生を可能にしています。

ビデオ表示部関連

◆(７～２３行) 表示部関連となります。

１、ビデオ表示領域

領域確保用の透明画像がこの領域となります。（構想イメージ図 fig2-1)

◆透明画像が10行目の img 属性の kara2.png です。

(1)アスペクト比はビデオと同じ比にしてあります。

(2)ビデオタグ部は後述の css の position: fixed で固定します。

◆イメージを掴むにはメインメニュー下の　ビデオ　と比較確認してください。

◆レシポンシブ時のビデオ全領域の表示のイメージ図（fig2-2)

２、メッセージや操作ボタン関連

◆html は12行から最後の23行間となります。イメージ図（fig2-3)

◆後述の css を適用後、透明画像の中に持ち上げます。イメージ図（fig2-4)

13行と16行のメッセージ画像は後述の Javascript でビデオの 再生/停止 の状態により何れかを表示させ、再生の状態では約5秒間でフェードアウトさせています。

この節では前節の　HTML に当てた、 CSS の紹介となります。

　◆参考　右列　[ ツリー構造 DOM 全体図 ] [ 各項 詳細/概略図 ]

はじめに

１、全体的なレイヤー z-index の構成（図 fig3-1)

◆ビデオ要素を最背面に設定し、他の要素をその上に配置しています。こうすることでコンテンツ部をスクロールした際にコンテンツ部がビデオ上面をスライドしながら覆っていくように見えますね。

ちなみに、コンテンツ部の白色のバックグランド部を透明にすれば、ビデオ画面の上を文字や図等がスクロールされるようになりますね。半透明化機能を使ってください。

半透明化の機能説明へ

◆余談　メインメニュー部や右横から展開されるサイドメニュー部はコンテンツ部よりも更に上面にしています。

２、HTML の幅（図 fig3-2)

◆ ◆ 注意※１　◆ ◆

◆※1 この　HTML の最大幅は 1024px となっています。

◆※2 作成したビデオの幅は　 1002px でしたね。

以降、要素ごとに重要部を説明していきます。

video 要素部

video {
  position: fixed;
  max-width: 1024px;
  width: 100%;
  margin-top: -15px;
  z-index: -1;
}

article-video-area 要素部

 #article-video-area {
    margin-top: 0;
    z-index: 5;
 }

◆以降の全要素を入れるための、親要素です。 z-index に 5 を指定しビデオよりも上面にしています。

[ 余談 ]　空白画像ではなく、ただの空白にするには、高さ指定で算術の calck (vw100 * アスペクト比) でも可能です（ビデオのアスペクト比でレシポンシブする空白部を作れば良いのかな）。

video-img img 要素部

 .video-img img {
   max-width: 1024px;
   width: 100%;
   margin: 0 auto;
 }

空白画像表示の指定です。

◆max-width と width は、前述の注意※1、※2、の video と同じ対応です。

◆margin: 0 auto で中央表示にしています。

video-msgon 要素部

 #video-msgon {
   width: 251px;
   margin: -160px auto 13px;
   opacity: 0;
   transition: 2s opacity;
 }

メッセージ用の png の文字画像の指定部です。画像内容（ Thank You !）の文字です。

◆Javascript で制御するために ID 属性としています。

opacit を 0 （透明）に指定。transition : 2s opacity; では、２秒掛けてフェードアウトさせます。ビデオが再生された時に java で３秒間表示後に、このフェードアウトが掛かります。

◆マージンのトップに -160px を指定し前述の空白画像に重ねています。

video-msgoff 要素部

 #video-msgoff {
  text-align: center;
  margin: -50px auto 0;
  transition: 1s opacity;
 }

ビデオが停止している時のメッセージ用の png 画像（ ThankYou watch the video. ）で、前述の（ Thank You !）と重ねています。

videonav-btn 要素部

 #videonav-btn {
  width: 80%;
  margin: 0 auto 15px auto;
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
 }

属性名の後部に -btn が付いていますが、マット（黒色半透明の敷物）で、以降の文字やボタンの親要素となります。

◆background の rgba (0, 0, 0, .5) では、色と透明度の指定で (赤の出力量, 緑の出力量, 青の出力量, 透過度) でしたね。

◆border-radius の　5px で四隅の角に 5px のＲ付けをしています。

videonav-btn p 要素部

 #videonav-btn p {
  font-size: 1rem;
  line-height: 1.6rem;
  text-align: center;
  color: #05a2b3;
  margin-top: .1em;
 }

前述 videonav-btn の領域内における p 文字 の指定です。

videonav-btn button 要素部

 #videonav-btn button {
  display: block;
  width: 40%;
  padding: 0.1rem;
  font-size: 1.3rem;
  color: #fff;
  margin: 0.5rem auto;
  background: rgba(255, 255, 255, .2);
  border-radius: 3px;
  border: thin solid #3b1af4;
  cursor: pointer;
  transition: .3s background;
 }

◆ボタンの要素指定部ですが、 id 属性の videonav-btn 内の 子要素の１つですね。

◆次節で紹介する javascript で、このボタンが押された時の制御も考慮しての内容となっています。

◆transition は、アニメーション指定でこの場合、 background　の色を 0.3秒 掛けて変化しなさい の指定でしたね。

videonav-btn button: hover 要素部

 #videonav-btn button: hover {
  background-color: aquamarine;
 }

◆ボタンがホバーした時の指定で、ここではバックグランドカラーを　aquamarine 色にします。この時前述のアニメーション指定により、0.3秒のエフェクトが掛かります。

autoplay 再生について

◆HTML のビデオタグに autoplay属性 の指定があれば、基本的にはブラウザーにＨＴＭＬが呼込まれた時点で自動再生は始まります。但し、以下 *１ の条件となります( 以降の全ての内容は ド素人の Yoshi が勝手に思っていることで、間違っていたら是非ご指摘をくださ)。

　*1 GooglChrome や スマホ等 の場合

　基本的には、ビデオタグの属性指定に muted が不可欠で、autoplay と muted　の指定がある場合に自動再生が始まります。これはビデオファイルに音源が無くても必要だと思っています。そして、これらはブラウザーを使っての開発段階のみに適応されていると思っています。 作成日 2020/05/25

下のグレーのボックス内が Yoshi が対応している javascript の内容となっています。

以降を適応する場合には、右列の　使用についてのお願い　を厳守してください。

リスナーを仕掛けるための変数定義

◆3行目～6行目 (参照 詳細1)

各変数に javaで操作したい IDやClass を変数に代入し、変数からの処理を可能にする準備段階です。

自動再生中の対応

◆7行目～10行目 (参照 詳細2)

ビデオタグ vid（HTMLのidはbgvid) にリスナーを仕掛け　自動再生中(play)の処理として、ボタン内の文字を Video-Pause に指定( 変更)。メッセージ画像 Pleasewatchthevideo.png を透明にして見えないようにしています。

ボタンが押された時の対応

◆11行目～28行目 (参照 詳細3)

pauseButton のクリックイベントにリスナーを仕掛けています。

ここでの処理は自動再生処理の中に割り込んでいく処理になります。

IF 文の定義で、自動再生が停止中ならば　⇒　13行目で自動再生を実行させます。

IF に対しての else 23行目で、そうで（自動再生が停止中）なかったなら　⇒　23行目で自動再生を停止させています。

<!--04/12 ビデオボタン04/12 -->
<script type="text/javascript">
  const vid = document.getElementById('bgvid');
  const msgon = document.getElementById('video-msgon');
  const msgoff = document.getElementById('video-msgoff');
  const pauseButton = document.getElementById('videobtn');
  vid.addEventListener('play', function() {
    pauseButton.innerHTML = 'Video-Pause';
    msgoff.style.opacity = '0';    
  });  
  pauseButton.addEventListener('click', function() {
    if (vid.paused) {
      vid.play();
      pauseButton.innerHTML = 'Video-Pause';
      msgoff.style.opacity = '0';
      msgon.style.opacity =  '1';
      let count = 0;
      let countup = function(){
        msgon.style.opacity = '0';
      }
      setTimeout(countup, 3000);
    } else {
      vid.pause();
      pauseButton.innerHTML = 'Video-Paused';
      msgon.style.opacity =  '0';
      msgoff.style.opacity = '1';
    }
  })
</script>

以上が、ビデオ表示をトップ（メニューの下）に表示させる説明でした。

各節で大切なこと

★ ビデオタグには、ＣＳＳで fixde で固定掛ける。

★ ビデオタグには、ＣＳＳで z-index で最背面に指定する。

★ ビデオ表示領域には、透明な枠で覆う（コンテンツ部を開く）。この領域が確保されていないとビデオが再生されても気づきませんよ。特に無音のビデオでは再生されていても異常たと思ってしまいますよ。

中間で見せるには

これまでの説明のように、背景として固定してあるビデオや絵はコンテンツ上の何処にでも背景として見せる(開く）ことができますが、何処に開かせるかは前もっての DOM内の（ノード/階層構造/ネスト状態） の考慮が重要となりますね。

1. 要素の状態を覗いて見る

下の [半透明化の実行]ボタン を押すと、メインコンテンツ全体とその子要素となる各節のbackground-colorの(白色）を半透明化し、且つ 青線内 が fixed（固定状態）になります。

　操作方法は（右列 実行時の使い方)

◆奥側にはビデオ（絵）が見えましたね。これはブラウザーがレイヤー効果を作り出しているからでしたね。

◆画面をスクロール ・ レシポンシブした結果

透明度の違いにより、いろいろの要素が確認できますね。全ての要素はノード（親子関係）を持っています。これらのノードと配置を考慮すればいろいろな表示方法（表現）が可能になりますね。

◆htmlは後で書かれた内容が上面なる

[余談] fixedされて抜け出した場所にスクロールすると上下の文章で階層の違いがあり、後で書かれた文章が上面（手前）になっていますね。☆注意☆これは z-index 指定とは別の話でブラウザーは常にこのように表示します。

2. 一般的な見せ方

　トップ以外で見せるにはこれ以降の２ヶ所の見せ方が一般的ですね。これらは何れも トップの空白画像要素 から見ると兄弟要素（同じ階層部）に空白要素を指定しています。

◆直ぐ下の空白は div 要素に hight 400px を指定し空白部としています。

空白の中にある 検証結果関連 の作り方はビデオのボタン作成時と同じ考え方です。ここでは、空白 div の中に書き、最初の要素の padding-top に 255px を指定して上部に大きな空白を作っています。

◆最後の空白部はトップで使った空白画像を再度使っています。

ボトムでビデオ（背景）を気持ちよく終わらせるためには、チョットした工夫が必要で、

使用中のブラウザーの 幅 vw と 高さ vh を算術 calc にて算術式で指定します。レシポンシブの場合には更に、メディアクエリー で幅に合わせた指定を考慮します。以下が算術式作成の参照部となります。

便利で重要な CSSへ