Question

如何制作自带的视频播放器，如jwplayer或youtube视频播放器？ 我知道我可以使用video标签以及一些javascript和css来制作视频播放器，但是我该如何制作，这样您只需添加几行代码就可以像jwplayer一样使用它和YouTube吗？

通过查看jwplayer网站，我发现它们只需要包含几行JavaScript即可使用播放器：https://support.jwplayer.com/articles/how-to-embed-a-jwplayer

使用youtube播放器，您只需要将要使用的视频放在iframe中？ 为什么只有在使用iframe时才显示视频？根据这样的说法：https://www.w3schools.com/tags/tag_iframe.asp可以显示整个网站，而不仅仅是视频播放器？

jwplayer网站上的代码段：

<div id="myElement"></div>

<script type="text/javascript">
    var playerInstance = jwplayer("myElement");
    playerInstance.setup({
        file: "//example.com/uploads/myVideo.mp4",
        mediaid: "xxxxYYYY"

    });
</script>

您如何嵌入youtube视频：

<iframe src="http://www.youtube.com/embed/W7qWa52k-nE"
width="560" height="315" frameborder="0" allowfullscreen></iframe>

如何仅使用使用html，css和javascript来做到这一点？

Answer 1

首先，YouTube上的iframe会很好地显示整个页面。但是您可以看到，在url中，完整的页面不是https://www.youtube.com/watch?v=W7qWa52k-nE（显示正常的YouTube页面），而是https://www.youtube.com/embed/W7qWa52k-nE（请注意“嵌入”）。在浏览器中打开https://www.youtube.com/embed/W7qWa52k-nE，您只会看到视频播放器。这就是为什么iframe只能显示播放器的原因。

现在，当您使用jwplayer时，只需要写几行，但是您必须将库js和CSS文件导入页面。您编写的行将调用库中的函数。

要使用HTML5编写播放器，您需要使用和编写一些javascript事件和函数（请参见：https://www.w3schools.com/tags/ref_av_dom.asp）。

/* LIB */

function MyPlayer(playerContainer) {

    let videoElement;
    let videoPoster;

    const instance = {};

    instance.stop = () => {
        return new Promise(resolve => {
            videoElement.pause();
            videoElement.src = null;


            setTimeout(() => {
                resolve();
            });
        });
    };

    instance.setUrl = async(url) => {
        await instance.stop();
        videoElement.src = url;
        videoElement.load();
    };

    instance.play = () => {
        videoElement.play();
    };

    instance.playUrl = async(url) => {
        await instance.setUrl(url);
        instance.play();
    };
    
    instance.pause = () => {
        videoElement.pause();
    };
    
    instance.setPoster = (url) => {
      if(url) {
        videoPoster.style.backgroundImage = 'url(' + url + ')';
      } else {
        videoPoster.style.backgroundImage = null;
      }
    };

    const onPlayerEvent = (eventName, event) => {
      playerContainer.setAttribute('data-state', eventName);
    };
    const onCoverClick = (event) => {
      event.preventDefault();
      event.stopPropagation();
      
      if(videoElement.paused) {
        instance.play();
      } else {
        instance.pause();
      }
    };


    /* Player init */
    playerContainer.className += ' MyPlayer';
    playerContainer.setAttribute('data-state', 'emptied');
    playerContainer.innerHTML = '<video class="videoElement" poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></video><div class="videoPoster"></div><div class="videoIndicator"></div><div class="playerLogo">MyPlayer</div><div class="videoCover"></div>';
    
    videoElement = playerContainer.getElementsByClassName('videoElement')[0];
    videoElement.addEventListener('emptied', onPlayerEvent.bind(this, 'emptied'), false);
    videoElement.addEventListener('loadstart', onPlayerEvent.bind(this, 'loadstart'), false);
    videoElement.addEventListener('canplay', onPlayerEvent.bind(this, 'canplay'), false);
    videoElement.addEventListener('playing', onPlayerEvent.bind(this, 'playing'), false);
    videoElement.addEventListener('pause', onPlayerEvent.bind(this, 'pause'), false);
    videoElement.addEventListener('waiting', onPlayerEvent.bind(this, 'waiting'), false);
    videoElement.addEventListener('ended', onPlayerEvent.bind(this, 'ended'), false);
    videoElement.addEventListener('error', onPlayerEvent.bind(this, 'error'), false);
    
    videoPoster = playerContainer.getElementsByClassName('videoPoster')[0];
    
    const videoCover = playerContainer.getElementsByClassName('videoCover')[0];
    videoCover.addEventListener('click', onCoverClick, false);
    videoCover.addEventListener('touch', onCoverClick, false);

    return instance;
}



/* USAGE */

const playerInstance = MyPlayer(document.getElementById('myPlayer'));
playerInstance.setPoster('https://www.w3schools.com/html/pic_trulli.jpg');
playerInstance.playUrl('https://www.w3schools.com/html/mov_bbb.mp4');

const playerInstance2 = MyPlayer(document.getElementById('myPlayer2'));
playerInstance2.setPoster('https://www.w3schools.com/html/pic_trulli.jpg');
playerInstance2.setUrl('https://www.w3schools.com/html/mov_bbb.mp4');

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.MyPlayer {
  position: relative;
}

.MyPlayer .videoElement {
  background-color: black;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

.MyPlayer .videoPoster, .MyPlayer .videoCover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.MyPlayer .videoPoster {
  opacity: 0;
  background-size: cover;
  transition: opacity .2s;
}
.MyPlayer[data-state="emptied"] .videoPoster, .MyPlayer[data-state="loadstart"] .videoPoster, .MyPlayer[data-state="canplay"] .videoPoster, .MyPlayer[data-state="ended"] .videoPoster {
  opacity: 1;
}

.MyPlayer .videoIndicator::before {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  text-shadow: 0 0 5px #000;
}
.MyPlayer[data-state="emptied"] .videoIndicator::before {
  content: '';
}
.MyPlayer[data-state="loadstart"] .videoIndicator::before, .MyPlayer[data-state="waiting"] .videoIndicator::before {
  content: '\25CC';
  font-size: 1.6em;
  animation:spin 4s linear infinite;
}
.MyPlayer[data-state="canplay"] .videoIndicator::before {
  content: '\25B6';
  font-size: 3em;
  right: 10px;
  text-align: center;
}
.MyPlayer[data-state="playing"] .videoIndicator::before {
  content: '\25B6';
  font-size: 1.3em;
}
.MyPlayer[data-state="pause"] .videoIndicator::before {
  content: '\2590\A0\258C';
}
.MyPlayer[data-state="ended"] .videoIndicator::before {
  content: '\27F2';
  font-size: 1.3em;
}
.MyPlayer[data-state="error"] .videoIndicator::before {
  content: '\2716';
}

.MyPlayer .playerLogo {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 1.4em;
  color: #fff;
  text-shadow: 0 0 5px #f00;
  transition: color .2s, text-shadow .2s;
}
.MyPlayer[data-state="playing"]:not(:hover) .playerLogo {
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
}

<div id="myPlayer" style="display:inline-block;max-width:250px;"></div> <div id="myPlayer2" style="display:inline-block;max-width:225px;"></div><br />
Video files from https//www.w3schools.com<br />
Video from https://www.bigbuckbunny.org/

如何制作一个独立的视频播放器？

1 个答案: