最近需要在网页首页追加视频播放功能。 需要播放youtube视频。中间遇到一些波折。特来分享一下。
首先像网页添加视频文件我们通常够采用embed标签。 标签里可以设置很多的关键子。我们可以配置为flash插件。但在底版本的pad上就无法正常播放视频了。
后来在发现youtube player api。确实是个好东西。
https://developers.google.com/youtube/player_parameters?hl=zh-CN
嵌入式插件播放视频。不得不说flash是个好东西。但pad无法正常播放，我们网站开发人员比较头疼的东西。
<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 加载完自动播放
自己去设置把。
附上效果图
