YouTubeをブログに貼り付ける;リピートさせる
メモです。
YouTubeの貼り付けに関して最初2007年11月に記事を書きました。
当時は画質は最悪であまり感心できなかったので、このブログでは 貼り付けを断念し、自作制御付きFlashビデオを貼り付けるように しました。
ところがYouTubeの画質はどんどんと良くなり、いまやフルでは
ないとはいえハイビジョンにまでなりました。
また、機能に関しても繰り返し再生が可能になったり、イベント
を拾うこともできるようになりました。
そこで、記述を一新して、先ずは繰り返し再生の指定の仕方を示します。 イベント取得やAjax-APIを使った制御などはいずれ追加します。
### 2015/11/17
application/x-shockwave-flashが使えない端末が出てきましたので、記述を置き換えました。
YouTubeを繰り返し再生の形でブログに貼り付ける
基本は次の形のHTML記述です
<iframe width="499" height="315" src="https://www.youtube.com/embed/5m_GhNvfyfM?feature=player_detailpage &playlist=5m_GhNvfyfM&autoplay=1&rel=0&loop=1&version=2" frameborder="0" allowfullscreen></iframe>
しかしながら、AndroidのChromeではautoplayがあると固まってしまいます。
その為次のjavascriptでHTML記述を生成するようにしました。
<script type="text/javascript"> function disp_youtube(video_,autoplay_){ var _autoplay="&autoplay="+autoplay_; if(window.navigator.userAgent.toLowerCase().indexOf('linux')!=-1){ _autoplay=""; } var _youtube="<iframe width='499' height='315'" +"src='https://www.youtube.com/embed/"+video_ +"?playlist="+video_+_autoplay+"&rel=0&loop=1' " +"frameborder='0' allowfullscreen></iframe>"; document.write(_youtube); } disp_youtube("5m_GhNvfyfM",1); </script>
関数の形ですので、youtubeを張り付ける複数のhtmlから参照する形にしておけば、 今後また仕様が変更になっても対処が容易となります。
この版ではAndroid/linuxでは自動再生しないようにしています。もう少し詳細な対応をすべきではあります。
### 2011/6/16
ビデオを1分のものから30秒の無音のものに置き換え、自動再生オプションを付けました。
### 2015/3/1
&relと&version記述を加え、リピート復活
### 2015/11/17
application/x-shockwave-flashを使わない形に変更
単純には動かないのでjavascript呼び出しとしました。
| 固定リンク
« ◇摩擦と氷と雷と | トップページ | ◇スイカ炭素 »