jquery 탭을 변경하면 강제로 html5 비디오가 표시됩니다.

#tabs를 지정하면 동영상이 표준 태그 선언이므로 비디오를 찾을 수 있다는 인상을 받았습니다. 나는 틀린 꼬리표를 밖으로 부르고 있는지 또는 일어나고있는 무엇이 완전하게 확실하지 않다. 이 기능을 사용하려면 JQuery 탭과 video-js 코드를 사용하고 있습니다. 사용자가 동영상을보기 시작하고 다른 탭을 방문하여 다시 돌아 오기를 원하면 선택하지 않은 탭의 동영상이 중지되어야한다고 생각합니다. 그러나 정확하게 작동하는 법을 잘 모르겠습니다. 제발 도와주세요. 여기에 내 코드가있다. 누군가 내가 뭘 잘못하고 있는지 말할 수 있을까?jquery 탭을 변경하면 강제로 html5 비디오가 표시됩니다.

<html> 
<head> 
    <link href="http://vjs.zencdn.net/5.18.4/video-js.css" rel="stylesheet"> 
    <!-- If you'd like to support IE8 --> 
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Video Library</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
    $('#tabs').on('click', function() { 
    $("my-video").each(function() { this.pause() }); 
}); 
    </script> 
    </head> 
<body> 
<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">About us</a></li> 
    <li><a href="#tabs-2">Features</a></li> 
    <li><a href="#tabs-3">Fabrics</a></li> 
    <li><a href="#tabs-4">Special Fabrics</a></li> 
    <li><a href="#tabs-5">Standard Fabrics</a></li> 
    <li><a href="#tabs-6">Care Instructions</a></li> 
    <li><a href="#tabs-7">How It's Made</a></li> 
    <li><a href="#tabs-8">Women's Coats</a></li></ul> 
    <div id="tabs-1"><br> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/about_factory.jpg" data-setup="{}"> 
    <source src="sources/about-our-factory.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    </div> 
    <div id="tabs-2"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/coat_features.jpg" data-setup="{}"> 
    <source src="sources/coat-features-coat-profile.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video></div> 
    <div id="tabs-3"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/fabrics.jpg" data-setup="{}"> 
    <source src="sources/cotton-fabrics.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    </div> 
    <div id="tabs-4"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/specialty_fabrics.jpg" data-setup="{}"> 
    <source src="sources/specialty-fabrics.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    </div> 
    <div id="tabs-5"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/coat_fabrics.jpg" data-setup="{}"> 
    <source src="sources/fabrics.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    </div> 
    <div id="tabs-6"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/care_instructions.jpg" data-setup="{}"> 
    <source src="sources/how-to-care-for-your-lab-coat.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    </div> 
    <div id="tabs-7"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/how_its_made.jpg" data-setup="{}"> 
    <source src="sources/how-we-make-your-lab-coat.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    </div> 
    <div id="tabs-8"> 
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="imgs/womens_coats.jpg" data-setup="{}"> 
    <source src="sources/womens-coats.mp4" type='video/mp4'> 
    <p class="vjs-no-js"> 
     To view this video please enable JavaScript, and consider upgrading to a web browser that 
     <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
    </p> 
    </video> 
    <script src="http://vjs.zencdn.net/5.18.4/video.js"></script> 
</div> 
</body> 
</html>

당신이 탭을 통해 루프를 할 수 있도록 변경할 때 트리거 및 각 비디오 일시 중지 탭에 대한 초기화에 함수를 첨부 할 수 있습니다

출처

2017-03-27 bbcompent1

표시/숨기기 탭에 jQuery 이벤트를 걸러 내고 해당 비디오를 재생/일시 중지해야합니다. – Offbeatmammal

좋습니다. 그렇지만 어떻게됩니까? #tabs에 전화를 걸면 JQuery UI Tab 선언을 캡처한다는 인상을 받고있었습니다. – bbcompent1

$(function() { 
    $("#tabs").tabs({ 
    activate: function(event, ui) { $(".video-js").each(function (i,obj) { this.pause() }) } 
    }); 
});

을하거나 바인딩 이벤트를 추가 할 수 있습니다 탭 활성화 : 비디오의 선택이 예제 문제에서와 같이이 아닌 ID는 클래스에 있는지

$(function() { 
    $("#tabs").on("tabsactivate", function(event, ui) { $(".video-js").each(function (i,obj) { this.pause() }) }); 
});

참고

출처

2017-03-27 16:29:07 Offbeatmammal

감사합니다 !!! 완벽하게 작동합니다! – bbcompent1

jquery 탭을 변경하면 강제로 html5 비디오가 표시됩니다.

답변

관련 문제