Question

我已经构建了一个带有无序图像列表的测试页面，如果单击该图像，则打开一个jwplayer，其中包含覆盖/模态中的相应视频。首次点击任何图像时一切正常。在灯箱中打开正确的视频。但是，当叠加层关闭并且我们单击另一个图像时，叠加层将打开空白，但关闭按钮除外。

我看了很多关于这个主题的帖子，但仍然不知道错误是什么。如果有人能看一看并告诉我问题是什么，我真的很感激。

这是我的JS代码：

//sets up the video player 

function setupVideoPlayer(s){ 

    var jwp = jwplayer('target').setup({ 
        file: s.videoLink, 
        title: s.videoTitle, 
        displaytitle: 'false', 
        width: '60%', 
        controls: 'true', 
        aspectratio: '16:9', 
        autostart: 'false', 
        stretching: 'fill' }); 

    var quality = jwplayer('target').setCurrentQuality(5); 
}

//creates the overlay, player and button

var $overlay = $('<div id="overlay"></div>'); 
var $player = $('<div id="target" class="jwp"></div>');
var $button = $('<a class="closeOverlay fa fa-times-circle"></a>');

//adds the overlay to the page 

$('body').append($overlay);

//adds player to the overlay 

$overlay.append($player);

//captures the click even on a video link 

$('#videoList a').click(function(event){ 
    event.preventDefault();
    var triggerLink = $(this).attr('href');

    //call the player everytime a videolink is clicked 

setupVideoPlayer({ 
        videoLink : triggerLink, 
        videoTitle : 'Keone & Mariel Madrid :: "Cups (When I\'m Gone)" by Anna Kendrick :: Urban Dance Camp' 
    }); 

    //remove old content from overlay

    $overlay.empty(); 
    //adds player and button to the overlay 
    $overlay.append($player);
    $overlay.prepend($button);
    //show the overlay 
    $overlay.show();

});

//closes overlay

$('body').on( 'click', 'a.closeOverlay', function() { $overlay.hide(); });

html代码并不那么壮观，但以防万一：

<body>
 <div id="page-container">
    <div id="content-container" class="group">
        <section id="main">
            <h1>Playback Time!</h1>
            <p>this is a simple test page to demonstrate a sidebar video playing in overlay mode</p>
        </section>
        <section id="sidebar">
            <p class="sectionTitle">Videos</p>
            <!-- MODAL TRIGGERS -->
        <ul id="videoList">
          <li>
            <a href="https://www.youtube.com/watch?v=CLRPH3nFf8w">
              <img src="http://i1381.photobucket.com/albums/ah236/mxquel/92419208-c7b4-4591-a3bd-95ea9b732924_zps473abb42.png" alt="Thumbnail of a Video" />
            </a>
            <p>description or title of the first video</p>      
          </li> 
          <li>
            <a href="https://www.youtube.com/watch?v=cmSbXsFE3l8">
              <img src="http://i1381.photobucket.com/albums/ah236/mxquel/92419208-c7b4-4591-a3bd-95ea9b732924_zps473abb42.png" alt="Thumbnail of a Video" />
            </a>
            <p>description or title of the second video</p>     
          </li>
        </ul>
        </section>
    </div>
</div>

</body>

关闭模态窗口后，jwplayer不再显示播放器

0 个答案: