js 动态切换视频
这里贴上部分代码供大家参考。<span style="font-size:18px;"> <li id="about_li6"> <h2 id="about_img6"><span>媒体中心</span><img src="images/about_hx.jpg" /></h2> <div class="about_sub" id="about_content6"> <a href="javascript:void(0);" id="back"><img src="images/back.png" /><span>返回</span></a> <h3>媒体中心</h3> <h4>MEDIA</h4> <div class="media_content"> <div class="media_windows" id="flv1"> <!---显示视频区域----> </div> <div class="media_list_warp"> <div class="media_list_content" id="media_list_content"> <asp:Repeater runat="server" ID="rp_video"> <ItemTemplate> <a href="javascript:void(0);" class='<%#Eval("Description") %>'><%#Display.Tool_CutString(Eval("Title"),25) %></a> </ItemTemplate> </asp:Repeater> </div> </div> </div> </div> </li></span>
上面代码是样式代码,上面是视频的显示区域,下面视频标题列表通过repeater来读取,我把读出来的视频地址绑定为a标签的class属性,是为了点击时获取该值。
<span style="font-size:18px;">function about_img6() { $("#about_ul li").css("width", "146px"); $("#media_list_content ul li").css("width", "125px"); $("#about_ul li h2").fadeIn(500); $("#about_ul li h2 span,#about_ul li h2 img").hide(); $("#about_ul li .about_sub").hide(); $("#about_ul").animate({ "width": "1045px" }); $("#about_li1,#about_li2,#about_li3,#about_li4,#about_li5,#about_li7").animate({ "width": "90px" }); $("#about_li6").animate({ "width": "505px" }); $("#about_content6").show(); $("#about_img6").hide(); var srclist = document.getElementById("media_list_content"); var firsrc = srclist.getElementsByTagName("a")[0].className; //默认加载第一个视频 setvideo(firsrc); }; $("#media_list_content a").click(function () { setvideo($(this).attr("class")); }); ///切换视频方法 function setvideo(url) { var youku = document.getElementById("flv1"); var htmlstr = "<object id='obx' name='obx' width='395' height='290'>"; htmlstr += "<param name='movie' value='" + url + "'></param>"; htmlstr += "<param name='allowFullScreen' value='true'></param>"; htmlstr += "<param name='allowscriptaccess' value='always'></param>"; htmlstr += "<param name='wmode' value='opaque'></param>"; htmlstr += "<embed src='" + url + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' width='395' height='290'></embed>"; htmlstr += "</object>"; youku.innerHTML = ""; youku.innerHTML = htmlstr; };</span>
此代码是js代码,当点击展开媒体中心时,先获取下面视频标题列表中的第一个a标签中的class属性中的视频地址,然后调用显示视频方法setvideo(url),把获取的地址传过去,然后在页面上打印出object和embed标签,两个标签一起使用的目的是为了兼容各浏览器。
当视频标题被点击时,通过attr来获取当前被点击的a标签的class的值,再调用setvideo(url)方法来在页面上显示相应的视频。
补充:web前端 , JavaScript ,