KumaTechLab
2021-09-07/2023-05-23

動画ホバー時再生【Youtubeも紹介】

動画ホバー時再生【Youtubeも紹介】

今回は動画をホバー時に再生させる方法をご紹介いたします。

想定するのは一般的な動画ファイルです。埋め込み動画ではできないので注意してください。

Youtubeの埋め込みの場合はホバー時に再生させることが可能なので併せて説明します。

動画をホバー時に再生させる

まず、HTMLが以下になります。

<div>
    <video controls id="my-video" src="動画URL">
</div>

続いてこの動画に対してホバー時の再生をさせてみましょう。

まずは、コードから。

window.addEventListener( 'DOMContentLoaded', () => {
    const myVideo = document.querySelector( '#my-video' );
    myVideo.addEventListener( 'canplaythrough', () => {
        myVideo.addEventListener( 'mouseenter', () => {
            myVideo.volume = 0.0;
            myVideo.play();
        } );
    } );


    myVideo.addEventListener( 'ended', () => {
        myVideo.pause();
        myVideo.currentTime = 0;
    } );


    myVideo.addEventListener( 'mouseleave', () => {
        myVideo.pause();
        myVideo.currentTime = 0;
    } );
} );

videoに対して一個一個イベントを設定してあげているだけです。

上の例だとホバーで再生し、終了すると開始位置に戻ります。

また、途中でvideo外にカーソルが出た場合も開始位置に戻ります。

見慣れないイベントの「canplaythrough」はメディアを最後まで再生するのに十分なデータが読み込まれたタイミングで発火するイベントです。

videoで使用できるイベントは結構たくさんあるので、その他のも見ておくことをお勧めします。

イベント一覧

DEMO

PCで表示する場合は以上で十分です。

しかし、スマホの場合はどうでしょうか。

ホバー時の再生なのでスマホでは効かないです。

そこでスマホで再生する際はタッチしている間再生にしてみましょう。

スマホ用HTML

<div>
    <video controls autoplay muted playsinline id="my-video" src="動画URL">
</div>

スマホ用JS

window.addEventListener( 'DOMContentLoaded', () => {
    const myVideo = document.querySelector( '#my-video' );
    myVideo.addEventListener( 'canplaythrough', () => {
        myVideo.pause();
        myVideo.currentTime = 0;
        myVideo.addEventListener( 'touchstart', () => {
            myVideo.volume = 0.0;
            myVideo.play();
        } );
    } );


    myVideo.addEventListener( 'ended', () => {
        myVideo.pause();
        myVideo.currentTime = 0;
    } );


    myVideo.addEventListener( 'touchend', () => {
        myVideo.pause();
        myVideo.currentTime = 0;
    } );
} );

safariを想定して解説します。

まず、HTMLの説明です。

ほとんど先ほどと変わりませんが、動画の属性に「controls」「muted」「autoplay」「playsinline」が必要になります。

これが欠けていると思ったように再生ができません。

JSの方の説明です。

まず、再生開始可能になったら「autoload」によって再生されている動画を止めます。(わざわざ「autoload」を使うのは、「autoload」がない場合再生に１クリック必要になるため)

あとは、ホバー処理をそのままタッチ処理に置き換えてあげるだけです。

これでホバー同様にタッチで再生し、タッチが離れたら停止します。

DEMO(スマホ用)

スマホの簡易判別を以下にいれておきます。

JSを切り替えたい場合に利用してください。

function isMobile() {
  if ( navigator.userAgent.match(/iPhone|Android.+Mobile/) ) {
    return true;
  } else {
    return false;
  }
}

Youtubeの埋め込み動画をホバー時に再生させる

youtubeには「Iframe Player API」という非常に便利なAPIがあります。

これを利用し、ホバー時の再生を実行してみたいと思います。

既存のiframeに対してではなく、youtubeの動画IDをもとにAPIで作成したiframeに対して使用できる方法です。

(もしかしたら既存のiframeに対してもできるかもしれないが、リファレンス見た感じでは不明でした。)

また、スマホの場合は自動再生ができない可能性もあります。(自動で再生するとネットワークの費用が発生する可能性があるためです。)

まずは、HTMLの方からです。

<div id="player"></div>

たった一行でシンプルです。

差し込むために「id」が必要になります。

続いてjavascriptの方です。

// youtube api のスクリプト挿入
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


// iframeの生成
let player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player( 'player', {
        height: '120.5',
        width: '200',
        videoId: 'IUN664s7N-c',
        playerVars: { origin: 'https://kumatech-lab.com/', },
        events: {
            'onReady': onPlayerReady,
        }
    });
}


// 動画準備完了時にイベントの登録
function onPlayerReady() {
    const ytplayer = document.querySelector( '#player' );
    ytplayer.addEventListener( 'mouseenter', () => {
        player.mute();
        player.playVideo();
    } );
    ytplayer.addEventListener( 'mouseleave', () => {
        player.mute();
        player.stopVideo();
    } );
}

まず、一番上のブロックです。

youtubeのapiスクリプトをスクリプトタグの一番先頭に差し込んでいます。

続いて中段です。

プレイヤーのインスタンスを生成します。

このコードが実行されると第一引数に指定した「id」内にiframeが挿入されます。

再生したい動画は「videoId」で指定してください。

また、動画の再生をコードから行う場合には「origin」を指定しきましょう。CORS( Cross-Origin Resourse Sharing)ではじかれてしまいます。

「events」ではイベントの登録ができます。イベントの種類はリファレンスを参考にしてください。

そして最後のブロックです。

最後の関数は動画の準備ができた際に呼び出される関数です。

リファレンスにある「再生の制御とプレーヤーの設定」から確認してください。

※動画の再生を操作する場合には先に音量調整する必要がありそうです。コンソールにエラーが表示されます。

※「mute」の場合は最初のホバーで再生しますが、音量がある場合は２回目以降のホバーでしか再生できませんでした。

DEMO

まとめ

以上、ホバーで動画を再生する方法でした。

動画を一覧で表示して今回のようなことを行う場合、javascriptの方で少し工夫が必要になる場合もあります。

上記を参考にカスタマイズしてみてください。

2020 KumaTechLab.