最个性化地定制Youtube嵌入播放器

很多博客经常嵌入Youtube的视频,而一般情况下,我们都只是简单地复制视频的嵌入代码,粘贴到博客代码中去。Youtube上的代码定制只有2个功能选项:是否添加相关视频、是否添加边框。实际上我们可以做地更多,我们可以很简单地通过修改代码定制出最个性化的播放器,甚至将其打造成音乐播放条。

要了解这些,你需要先了解嵌入代码中各个标记(tag)的定义。

一个最简单的Youtube嵌入代码是这样的:

<object width="425" height="349">
<param name="movie" value="http://www.youtube.com/v/Yx9FgLr9oTk&
hl=zh_CN&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<embed src="http://www.youtube.com/v/Yx9FgLr9oTk
&hl=zh_CN&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1"
type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="349">
</embed>
</object>

在哪里修改参数?

留意这一句:

http://www.youtube.com/v/Yx9FgLr9oTk&hl=zh_CN&
fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1

这里面就包含一些标记,下面是这些标记所代表的意义:

1、rel

相关视频。值为0或1,默认为1。设置为1则在视频播放后显示相关视频。

2、autoplay

自动播放。值为0或1,默认为0,不显示。你可以在上面的URL里加入&autoplay=1来实现视频的自动播放。

3、loop

循环播放。值为0或1,默认为0,不循环。你可以在上面的URL里加入&loop=1来实现视频的循环播放。

4、disablekb

键盘快捷键。值为0或1,默认为0,开启键盘快捷键。你可以在上面的URL里加入&disablekb=1来关闭视频的键盘快捷键操作播放器。具体的快捷键:

空格:暂停/播放

左箭头:重新播放

右箭头:前进10%

上下箭头:音量调节。

5、border

边框。只为0或1,默认为0。设置为1将使播放器显示边框,边框的颜色可以通过下面两个标记来定制。

6、color1,color2

RGB十六进制参数,color1是边框基本颜色, color2是播放条以及边框的第二颜色。

颜色代码很烦?我也觉得,Youtube也这么认为,所以,实际上这两个参数在Youtube的嵌入选项里可以用鼠标选择。

7、start

开始播放节点。这是一个很有用的参数。有时我们不希望视频从开头开始播放,或许从第55秒,start标记就是用来定制视频的初始播放时间。

比如,你可以在上面的URL里加入&start=55来实现视频的在55秒的地方开始播放。

8、fs

控制是否展示全屏按钮。值为0或1,默认为0。设置为1则会在播放器显示全屏按钮。

必须注意的是,要使用这个参数,上面代码中的橙色部分是不能缺少的。

9、fmt

视频格式。目前所知的是,当视频有高清版的情况下,令fmt=6会使视频变成高清版本(在中国的网速就不要想太多了),令fmt=18会使具有高清版的视频按照原始尺寸播放。

10、width,height

分别是视频嵌入窗口的宽度和高度,单位为像素。通过这2个参数,我们可以将视频播放器掩饰成音乐播放条。

当你想在博客嵌入一首歌,刚好youtube上有,你只想要音乐,不想要视频,这时你可以将height定义为24,这刚好是播放条的高度。

具体效果如下图所示:

OK,下面是kimi的倒霉史的视频吗?在不看源代码的情况下,你能猜到我将什么参数设置成什么么?:

34 条评论

  1. 2008 年 10 月 11 日 上午 10:57

    很有用,不错 🙂

  2. 2008 年 10 月 11 日 上午 11:46

    在贴Youtube视频的时候都没有想过去改代码~~

  3. 2008 年 10 月 11 日 上午 11:57

    老大,以前文章的很多图挂掉了……

  4. seed
    2008 年 10 月 11 日 下午 12:39

    今天东京TGS,我还是毅然没去……说几句废话……

  5. 2008 年 10 月 11 日 下午 12:42

    不错不错~ 谢谢

  6. 2008 年 10 月 11 日 下午 2:35

    以后试试在博客中放入视频

  7. 2008 年 10 月 11 日 下午 3:35

    医院里窝了两天。。。感受了一下人情冷暖世态炎凉。然后弄了一身的疲惫。

    收获颇丰。人在背负重压的时候,成长极快

    谢谢你,猥琐可能吧。。。。^_^

    我回去睡觉去了.

  8. 2008 年 10 月 11 日 下午 4:07

    原来YouTube可以自动循环播放,国内的都不可以

  9. 2008 年 10 月 11 日 下午 9:37

    哇塞,太棒了~~

  10. 2008 年 10 月 11 日 下午 11:08

    好文章!增长了知识了,谢谢!

  11. 2008 年 10 月 11 日 下午 11:54

    能把播放条放到视频顶部不?或者隐藏以来

  12. neo
    2008 年 10 月 12 日 上午 10:51

    哈,对我这样的代码白痴来说,极为有用

  13. 2008 年 10 月 12 日 上午 11:41

    很有用的,先收藏了!

  14. 2008 年 10 月 12 日 下午 12:48

    太专业了,暂时对我还没什么用处,毕竟youtube在国内的速度还是慢了些

  15. 2008 年 10 月 12 日 下午 5:29

    学习了,谢谢

  16. 2008 年 10 月 12 日 下午 6:29

    对,youtube在国内的速度还慢

  17. 2008 年 10 月 12 日 下午 6:30

    网站慢,不喜欢放视频

  18. eh5hj4h
    2008 年 10 月 12 日 下午 10:59

    不错,这篇文章有用

  19. 2008 年 10 月 15 日 下午 8:16

    不错。。。以前没有注意过

  20. 2008 年 10 月 17 日 上午 1:49

    呵呵 学习了,还从没想到要这样用呢.试试去

  21. 2008 年 10 月 17 日 下午 3:54

    长学问了。

  22. 2008 年 10 月 22 日 下午 7:23

    学习了,没想到还可以这么用,多谢分享!

  23. Eric
    2008 年 11 月 17 日 下午 5:41

    我有够火星了,
    半小时前才发现youtube支持快捷键~

  24. 2008 年 11 月 19 日 上午 7:58

    受教了,不错的教程

  25. 2009 年 4 月 8 日 下午 6:33

    可惜现在被gfw了

  26. 2009 年 6 月 15 日 下午 5:08

    受教了,不错的教程

  27. rst
    2011 年 12 月 11 日 上午 7:22

    nice,感謝你的分享.

发表评论

电子邮件地址不会被公开。 必填项已用*标注