谈谈网站插入youtube视频播放

最近需要在网页首页追加视频播放功能。 需要播放youtube视频。中间遇到一些波折。特来分享一下。

首先像网页添加视频文件我们通常够采用embed标签。 标签里可以设置很多的关键子。我们可以配置为flash插件。但在底版本的pad上就无法正常播放视频了。

后来在发现youtube player api。确实是个好东西。

https://developers.google.com/youtube/player_parameters?hl=zh-CN

嵌入式插件播放视频。不得不说flash是个好东西。但pad无法正常播放，我们网站开发人员比较头疼的东西。

?

1 2 3 4 5 6 7 8 9

<object width="425" height="344"> <param name="movie" value="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param> <param name="allowFullScreen" value="true"></param> <embed src="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"   type="application/x-shockwave-flash"   allowfullscreen="true"   width="425" height="344"> </embed> </object>

由于pad不能看视频所以这个方案只能废弃了。那么如果让pad看能。
https://developers.google.com/youtube/youtube_player_demo?hl=zh-CN

这个页面给我提供了主要思路。

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
frameborder="0" allowfullscreen>我们通过ifram来实现。通过他来测试，我们既可以在pc 和pad正常播放youtube视频了。

播放视频有遇到了一些麻烦。 当我们播放完的时候，youtube会默认的将其他视频的列表放到我们的视频尾部。在embed中我们发现了很多配置。

但用youtube播放时这些属性标签是不起作用的。那怎么办。程序员的艰辛只有你懂得。找吧。

https://developers.google.com/youtube/player_parameters?hl=zh-CN

当我看到这个文章的时候眼前一亮。 原来youtube是采用url参数 配置的。想要什么效果传递参数即可。 

那就实施吧。

 

<iframe id="ytplayer" width="520" height="317" src="https://www.youtube.com/embed/视频编号?rel=0&loop=1"></iframe>

 

rel 去除播放完显示的其他视频列表

loop 循环播放

autostart  加载完自动播放

自己去设置把。

附上效果图