谈谈网站插入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= "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 加载完自动播放
自己去设置把。
附上效果图
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。