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

阅读时间 4 分钟,快速阅读仅需 2 分钟。

很多博客经常嵌入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 条评论

发表回复

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