특정 링크 선택 후 동일한 위치에 5 개의 동영상 중 하나를 표시하는 방법은 무엇입니까?

Question

나는 5 div가 5 개 있는데, 해당 div의 오른쪽에있는 내용을 대화 상자에 표시하고 있습니다. 대화 상자 오른쪽에 각 div의 비디오를 넣고 싶습니다.

div1 it 첫 번째 비디오를 보여 주어야합니다. 두 번째 div의 호버에는 두 번째 비디오가 표시되어야합니다 ...

어떻게 각기 다른 위치에 다른 비디오를 표시 할 수 있습니까?

가능한 한 빨리 회신 해 주시기 바랍니다 .. 사전에 감사 ...

Answer 1

당신은 당신의 src 속성을 변경할 수있는 하나 개의 비디오 객체를 사용하는 경우 :

다음은 스크린 샷입니다. 저장 배열에 동영상 URL의이

var initVideos = function(){ 
    var videos = ["http://urlVideo1.flv", "http://urlVideo2.flv", ...], 
     videoArea = $("#videoArea"), 
     divs = $("ul li div"); // or some other selector for your HTML 

    // bind your hover event to the divs 
    divs.hover(
     // mouseover 
     function(){ 
      videoArea.show(); 
      videoArea.find("object > embed").prop("src", videos[$(this).index()]); 
     }, 
     // mouseout 
     function(){ 
      videoArea.hide(); 
     } 
    ); 
}; 

// once the DOM is ready 
(function(){ 
    initVideos(); 
}); 

데모 :http://jsfiddle.net/tive/J6WQm/

이를 세부적으로 조정하기 위해

이

접근 한 ... 은 아직 테스트하지 않은,하지만 약속 같은데 이전 이벤트가로드 된 후에 만 ​​src를 변경해야합니다. 너무 빨리 가져갈 때 브라우저가 너무 많은 리 흐름을 생성 할 수 있습니다.

또한 개체에 따라 코드가 다를 수 있습니다. 지금은 embed 객체 (mozzila 브라우저) 만 트리거하고 있지만 객체 (IE)도 param 무비 값으로 트리거해야합니다.

프로그램 개체 논리에 대응하기 위해 사람들은 swf object을 사용하여 해당 코드 블록을 생성했습니다. 이제 이것은 꽤 오랜 구식입니다.

그 때문에 더 적절한 접근 방식은 flashembed

접근이 사용할 수 있습니다 :http://jsfiddle.net/tive/Ff7Mq/ 불행히도이 라이브러리하셨습니까 : 메뉴

var initVideos = function() { 
    var divs = $("ul li a"); 

    // bind your hover event to the divs 
    divs.mouseenter(
     // mouseover 
     function() { 
      flashembed("videoArea", $(this).prop("href")); 
     }); 
    }; 

    // once all is loaded 
    $(window).load(function() { 
     initVideos(); 
    }); 

데모 링크에서 HREF 속성을 사용하여 jsfiddle에서 일하지 마라. 또한 jquery 1.7까지 지원합니다. 아마도 누군가가 최신 플러그인을 알고있을 것입니다.

편집 :에만 CSS는 ... 비디오가 임베디드되어 워킹이 ^^

Answer 2

I have made one simple fiddle as per your requirement. Please check below link. 

http://jsfiddle.net/vvbsr/2/