اخفاء الفيديو بعد انتهائه

الحل يعتمد على استخدام onended event وهو الحدث الذي ينفذ عندما ينتهي الفيديو، نفترض مثلاً أن تضم الفيديو هكذا:

<video id="myvideo" src="path/to/video" onended="myFunction()"></video>

عندها لإخفاء الفيديو نعرف myFunction هكذا:

function myFunction(){
  const videoElement = document.getElementById("myVideo");
  videoElement.style.display = 'none';
}

وبهذه الطريقة سيختفي الفيديو عندما ينتهي.

لاحظ أننا نخفي الفيديو كما نخفي أي عنصر html عادي وهناك طرق أخرى ﻹخفاء عناصر html ولكن display: none هو ما نريده في معظم اﻷحيان وهو أسرع وأسهل من حذف العنصر من شجرة html.

تستطيع باستخدام هذا الكود jquery 

<script type="text/javascript">
jQuery("#youtube-player-container").tubeplayer({
    onPlayerEnded: function(){ // اكتب هنا ما الذي تريد فعله },

});
</script>

يا مرحب

قم بإستخدام الكود التالي مع جعل الفيديو 

HTML

<video id="intro" src="video.mp4" width="100%" height="100%" autoplay>

CSS

#intro {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

JavaScript

<script type="text/javascript">

$(window).on("load", function () {  	
    $('#intro').show();
  
  	document.querySelector('intro').addEventListener('ended',function(){
		$('#intro').hide();
    }, false);
});

</script>