ネットサーフィンをしていると、ページ上に張り付けられた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>
今回とくに引っかかったのはiframe
とonmouseover
の相性。Iframe Player Apiはdiv
要素をjavascriptを利用してiframe
に変えてくれるというもの。なのでonmouseover
とonmouseout
はiframe
に対して適用(?)しなくてはいけないのですが、これができないのです。
たとえば今回の内容を聞いて、すぐ次のように書きたくなります。
<iframe id = "ifr"></iframe> <script> var ifr = document.getElementById("ifr"); ifr.onmouseover = function(){...} </script>
しかしこれではうまくいかない。動画にカーソルを乗せても何も起こりません。理由は……わかりませんでした。ごめんね(´・ω・`)
おそらくiframe
とonmouseover
/onmouseout
の相性が悪いのだと思います。そこでiframe
自体をdiv
で囲ってしまうわけです。するとonmouseover
/onmouseout
はdiv
に適用されますから、見た目上はiframe
にonmouseover
/onmouseout
が適用されているかのように見えます。
上の例なら次のようにいじってやるとうまくいきます。
<div id = "ifr"><iframe></iframe></div> <script> var ifr = document.getElementById("ifr"); ifr.onmouseover = function(){...} </script>
もっと洗練された書き方があるのかもしれませんが、わかりませんでした。
なおiframe
をdiv
で囲うというアイディアは以下を参考にしています。
あと以前にIframe Player Apiについて記事を書いています。こちらも参考になれば幸いです。