Js dynamic switching video

Source: Internet
Author: User

Some code is pasted here for your reference.

<Span style = "font-size: 18px; "> <li id =" about_li6 "> 

 

The above code is the style code, and the above is the video display area. The following video Title List is read through repeater. I bind the read video address to the class attribute of tag, to obtain the value when you click.
<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; // The setvideo (firsrc) of the first video is loaded by default; };$ ("# media_list_content "). click (function () {setvideo ($ (this ). attr ("class") ;}); // function setvideo (url) {var youku = document. getElementById ("flv1"); var htmlstr = "<object id = 'obx' name = 'obx' width = '000000' height = '000000'> "; 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 = 'alway' allowfullscreen = 'true' wmode = 'opaque 'width = '000000' height = '000000'> </embed> "; htmlstr + = "</object>"; youku. innerHTML = ""; youku. innerHTML = htmlstr ;}; </span>

 

This code is a js Code. When you click to expand the media center, first obtain the video address in the class attribute of the first a tag in the video title list below, then call the video display method setvideo (url) to pass the obtained address to the page and print the object and embed tags on the page. The two tags are used together to ensure compatibility with various browsers. When the video title is clicked, use attr to obtain the class value of the currently clicked a tag, and then call the setvideo (url) method to display the corresponding video on the page.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.