欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

自制视频切换功能。。。

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

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

看代码:

html:

//默认显示
<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>

控制按钮:

<li class="this" onClick="ytb('3qTQJUVvuu8')">1</li><li onClick="ytb('MsEwxqDL7eY')">2</li>

最后是调用的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");
	}

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

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

<iframe width="567" height="351" src="http://www.youtube.com/embed/3qTQJUVvuu8?rel=0" frameborder="0" allowfullscreen></iframe>

js修改iframe中的路径即可。

更多

本文固定链接: http://shanmao.me/web/zi-zhi-shi-pin-qie-huan-gong-neng | 山猫的博客

该日志由 admin 于2012年11月07日发表在 网页前端 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 自制视频切换功能。。。 | 山猫的博客
关键字: