« ◇摩擦と氷と雷と | トップページ | ◇スイカ炭素 »

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呼び出しとしました。

|

« ◇摩擦と氷と雷と | トップページ | ◇スイカ炭素 »

トラックバック


この記事へのトラックバック一覧です: YouTubeをブログに貼り付ける;リピートさせる:

« ◇摩擦と氷と雷と | トップページ | ◇スイカ炭素 »