js 动态切换视频

如图所示，想要一个这样的效果，就是点击下面视频标题时，上面的视频跟着切换，但是要求页面不重新加载。

参考文章在这里  

这里贴上部分代码供大家参考。

  <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>

上面代码是样式代码，上面是视频的显示区域，下面视频标题列表通过repeater来读取，我把读出来的视频地址绑定为a标签的class属性，是为了点击时获取该值。

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;        };

此代码是js代码，当点击展开媒体中心时，先获取下面视频标题列表中的第一个a标签中的class属性中的视频地址，然后调用显示视频方法setvideo(url),把获取的地址传过去，然后在页面上打印出object和embed标签，两个标签一起使用的目的是为了兼容各浏览器。

当视频标题被点击时，通过attr来获取当前被点击的a标签的class的值，再调用setvideo(url)方法来在页面上显示相应的视频。

不敢私藏，拿出来与大家分享。