nekoTheShadow’s diary

IT業界の片隅でひっそり生きるシステムエンジニアです(´・ω・`)

youtube動画にカーソルを乗せたときだけ音を出したい。

 ネットサーフィンをしていると、ページ上に張り付けられたyoutubeの動画が勝手に再生されるウェブページをよく見ます。いきなり音が鳴りだして、これが結構うっとおしい。しかも動画がページの隅にわかりづらいところにあることが多く、再生を停止するだけでもひと手間。そうやって無理やり見せることで宣伝効果を期待しているのでしょうが……

 わたしのぐちはともかく、今日はこれにヒントを得たものを作ってみました。簡単にいえば動画の上にカーソルがあるときにだけ音が流れるというもの。逆に動画上にマウスカーソルがないときはミュートの状態で動画だけ再生されるということです。

 以上をyoutube(Google)のIframe Player Apiを利用して実装していきます。そしてできたものが以下。動画は勝手に再生されませんので、自分で再生ボタンを押してから試してみてください。

 ソースは以下となります。なんだか色がどぎついですね。

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

<script src = "https://www.youtube.com/iframe_api" async></script>
<script>
  // divをiframeに変更するためのごにょごにょ
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player("player",{
      height: "270",
      width: "480",
      videoId: "JhokU8SlmNg",
    });
   }

  // 動画上をマウスオーバーないしマウスアウトしたときの処理
  // マウスオーバーしたらミュート解除、マウスアウトしたらミュート
  var elm = document.getElementById("elm");
  elm.onmouseover = function(){
    player.unMute();
  }
  elm.onmouseout = function(){
    player.mute();
  }
</script>

 今回とくに引っかかったのはiframeonmouseoverの相性。Iframe Player Apidiv要素をjavascriptを利用してiframeに変えてくれるというもの。なのでonmouseoveronmouseoutiframeに対して適用(?)しなくてはいけないのですが、これができないのです。

 たとえば今回の内容を聞いて、すぐ次のように書きたくなります。

<iframe id = "ifr"></iframe>

<script>
  var ifr = document.getElementById("ifr");
  ifr.onmouseover = function(){...}  
</script>

 しかしこれではうまくいかない。動画にカーソルを乗せても何も起こりません。理由は……わかりませんでした。ごめんね(´・ω・`)

 おそらくiframeonmouseover/onmouseoutの相性が悪いのだと思います。そこでiframe自体をdivで囲ってしまうわけです。するとonmouseover/onmouseoutdivに適用されますから、見た目上はiframeonmouseover/onmouseoutが適用されているかのように見えます。

 上の例なら次のようにいじってやるとうまくいきます。

<div id = "ifr"><iframe></iframe></div>

<script>
  var ifr = document.getElementById("ifr");
  ifr.onmouseover = function(){...}  
</script>

 もっと洗練された書き方があるのかもしれませんが、わかりませんでした。

 なおiframedivで囲うというアイディアは以下を参考にしています。

 あと以前にIframe Player Apiについて記事を書いています。こちらも参考になれば幸いです。