自制视频切换功能。。。

经常有好几个视频在一个框框里面播放,很多做成幻灯的方式。想让视频各自播放互不影响,切换后另一个视频要停止播放,不然还有声音在后台滴。。。

之前也有过关于视频切换的文章:http://shanmao.me/?s=%E8%A7%86%E9%A2%91%E5%88%87%E6%8D%A2

看代码:

html:
[code]
//默认显示
<div class="youtube1">
<object width="464" height="270"><param name="movie" value="http://www.youtube.com/v/3qTQJUVvuu8?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/3qTQJUVvuu8?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="464" height="270" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>
</div>
[/code]

控制按钮:
[code]
<li class="this" onClick="ytb(‘3qTQJUVvuu8’)">1</li><li onClick="ytb(‘MsEwxqDL7eY’)">2</li>
[/code]

最后是调用的js方法
[code lang=”js”]
function ytb(vid){//youtube 视频切换
$(".youtube1").find("param[name=movie]").attr("value","http://www.youtube.com/v/"+vid+"?version=3&hl=en_US");
$(".youtube1").find("embed").attr("src","http://www.youtube.com/v/"+vid+"?version=3&hl=en_US");
}
[/code]

就这么简单。思路就是点击替换他播放器中的URL路径。

另:谷歌浏览器不支持上面的方法,可以换成:

[code]
<iframe width="567" height="351" src="http://www.youtube.com/embed/3qTQJUVvuu8?rel=0" frameborder="0" allowfullscreen></iframe>
[/code]
js修改iframe中的路径即可。

“自制视频切换功能。。。”的一个回复

评论已关闭。