ミギムキ

[Youtube] playVideoを実行しても動画が再生されない(IFrame Player API)

ページに埋め込んだYoutube動画は、Youtubeで提供されている「IFrame Player API」で制御することができます。

できます。が、動画再生を行うためのAPI「playVideo()」がうまく動かず、ハマってしまったのでメモを残したいと思います。

NGなサンプルコード

<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/xxxxxxxxxxx?enablejsapi=1&origin=http://www.xxxx.com" frameborder="0"></iframe> <script> const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { const player = new YT.Player('player', { events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script>

動画の再生準備が完了したときに発生するイベント「onReady」で関数「onPlayerReady」を実行し、その中で「playVideo()」を実行しています。

一見動いてくれてもよさそうですが、これでは動画が再生されません。

修正版サンプルコード

function onPlayerReady(event) { event.target.mute(); event.target.playVideo(); }

「onPlayerReady」で「playVideo()」を実行する前に「mute()」を実行して、動画の音を消しています。

こうすることで動画が再生されるようになりました。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。