在内容上方的窗口中播放优酷帧

您可以使用 Youtube API 在有人点击缩略图时动态加载视频<html><head>  <style>    .container {      display: flex;      flex-direction: column;    }    img {      width: 250px;      height: 250px;    }  </style></head>  <body>    <div class="container"><span>Thumbnail (click me)</span>      <div id="thumbs">      <img class="videoThumb" src="http://i3.ytimg.com/vi/WL96WqA6e9Y/maxresdefault.jpg" data-video="WL96WqA6e9Y">      <img class="videoThumb" src="http://i3.ytimg.com/vi/ZQy89tZ-mRU/hqdefault.jpg" data-video="ZQy89tZ-mRU">      </div>    </div>    <div class="container">      <span>Video</span>      <div id="videoContainer"></div>    </div>    <script>      // Load the Youtube IFrame Player API code asynchronously.    var tag = document.createElement('script');    tag.src = "https://www.youtube.com/player_api";    var firstScriptTag = document.getElementsByTagName('script')[0];    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    function enlarge(event) {        //Get the video ID from the thumbnail        var videoID = event.target.attributes["data-video"].value;        //Get the video container        var container = document.getElementById("videoContainer");        //Clear it as youtube overwrites the element        container.innerHTML = "";        //Create element which will be replaced with video        var videoFrame = document.createElement('div');        //append to the container        container.appendChild(videoFrame);        //create youtube video        videoFrame.id = 'videoFrame';            new YT.Player('videoFrame', {                height: '360',                width: '640',                videoId: videoID        });    }    //Get all thumbnails    var vids = document.getElementsByClassName("videoThumb");    //Add event listener to all thumbnails    for(var i = 0; i < vids.length; i++) {        vids[i].addEventListener("click",enlarge);    }    </script></html>

在内容上方的窗口中播放优酷帧

2回答