如何制作自带的视频播放器，如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来做到这一点？
答案 0 :(得分：2)
首先，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/