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 ,