動画ウィジェット

動画をページに追加するのはとても簡単で、追加する方法は複数あります。まず、ビデオウィジェットアイコンに移動します。

埋め込み用のURLまたはカスタムコードを入力します。（例：youtubeから→共有→埋め込みコードをコピー）

動画を配置したら、スタイリングエレメントを編集することができます。

ファイルマネージャー領域からサムネイル画像を追加する
動画の周囲に影をつける

また、動画のサイズを好みのコンテナ/カラムに変更することも可能です。

動画を自動再生する方法

以下のコードを動画ウィジェットに埋め込むことによって、動画を自動再生させることが可能です。

動画ファイルを直接指定する場合

<video id="evergreen" width="100%" height="100%" oncontextmenu="return false;" webkit-playsinline="true" playsinline="true" autoplay muted>
    
    <source src="動画ファイルURL“ type="video/mp4">
               
</video>
	
	<div align="center">
	 	ボタンをクリックして音声のオンオフを切り替えてください:
     	<button class="btn-view-more"  onclick="disbleMute()" type="button">ON</button> 
     	<button class="btn-view-more" onclick="enableMute()" type="button">OFF</button>  
	</div>

    <script>
          var vid = document.getElementById("evergreen");
          function enableMute() {

              vid.muted = true;
          }
          function disbleMute() {

              vid.muted = false;
          }
    </script>

上記コード内の「動画ファイルURL」をご自身のものに置き換えてください。

Vimeoにアップロードした動画を埋め込む場合

<!-- Vimeoの動画を埋め込むiframe -->
<iframe src="https://player.vimeo.com/video/?background=1&autoplay=1&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen id="vimeoPlayer"></iframe>

<!-- 音を出すボタン -->
<button id="unmuteButton">音を出す</button>
<!-- 音をミュートにするボタン -->
<button id="muteButton">音をミュートにする</button>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('#vimeoPlayer');
    var player = new Vimeo.Player(iframe);
    var muteButton = document.querySelector('#muteButton');
    var unmuteButton = document.querySelector('#unmuteButton');

    muteButton.addEventListener('click', function() {
        player.setVolume(0);
    });

    unmuteButton.addEventListener('click', function() {
        player.setVolume(1);
    });
</script>

上記のコードの、VIDEO_IDを、埋め込みたいVimeoの動画ID（共有ボタンで「リンクをカスタマイズ」する前のURLに含まれている数字の羅列です。）に置き換えてください。

ブラウザで動画を自動再生するためには、音声をミュートにしておく必要があります。そのため、上記コードでは音声がミュートの状態で再生が始まる設定にしています。また、オートウェビナーとしての利用を考慮して、再生バーを非表示にした場合のために、音声のオンオフボタンを埋め込んでいます。（Vimeoでは、再生バーを非表示にすると音声コントロールも非表示になってしまうため。）

前へ音声ウィジェット次へブログウィジェット

最終更新 1 年前