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

Question

如何制作独立的视频播放器，如 jwplayer 或 youtube 视频播放器？ 我知道我可以使用视频标签以及一些 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/