Воспроизведение следующего видео путем вызова функции, которая должна передать ему событие

Вопрос о том, как JavaScript может вызвать следующее видео, был задан, поскольку я тщательно исследовал эту тему перед публикацией. Однако в ситуации, которую я опишу, видео запускается после того, как событие onclick вызывает функцию: function(e), и мне нужно иметь возможность вызвать следующее видео, вызвав функцию(e) снова, как только код обнаруживает завершенное событие с помощью метода addEventListener.

Я опубликовал весь свой код ниже. Кроме того, я добавил комментарии, чтобы проиллюстрировать то, что я “думаю” происходит. Я новичок в JavaScript и недавно вышел на пенсию, поэтому у меня было время, чтобы исследовать Интернет, чтобы попытаться собрать воедино то, что происходит. Пожалуйста, не стесняйтесь, чтобы уточнить мой комментарий код, как я хотел бы быть установлен прямо на то, что у меня есть wriiten.

Я также сделал попытку поместить код на jsfiddle

https://jsfiddle.net/dan2004/tuouh36d/

но это только кажется, чтобы функционировать в Chrome.

Мой главный вопрос к каждому в отношении заявления:

документ.getElementById (‘видеоплеер’).addEventListener (‘ended’, handler,false);

Если я вызываю функцию вне функции, я могу выдать сообщение через предупреждение, но если я вызываю функцию, в которой я нахожусь (обработчик(e)), я не могу получить следующее видео для запуска. Каким-то образом я должен иметь возможность вызвать функцию handler(e) и отправить ей следующее событие onclick.

Спасибо за любую помощь.

	
		var video_playlist, links, i, videotarget, filename, video, source;
			
				// Gets the video object from <div id="player"> in the HTML 
			video_playlist = document.getElementById("player");
				
				// "links" is an array which contains all the <a href> tags in the <div id="playlist">.
				// This div is located within <div id="player"> and contains a clickable playlist.	 
			links = video_playlist.getElementsByTagName('a');
				
				// This "for loop" scrolls through the links array of <a href> attributes and 
				// assigns an "onclick = handler" event to each one. 
			for (i=0; i<links.length; i++) {
				links[i].onclick = handler; 
			};
			
			
				// e is an [object MouseEvent]
			function handler(e) {
		
					
					// The handler function receives the full path to the mp4 file when it is clicked on in the playlist. 
					// The "preventDefault" method stops the function from following that path. 
					// This is so the data in the path may be parsed and manipulated below
				e.preventDefault();
				
					// videotarget grabs the href attribute of the item clicked on 
					// in the "playlist". This is the full path to the video file. 
				videotarget = this.getAttribute("href");
							
					// Through the use of substr, filename grabs that part of the href which
					// does not include the extension.
				filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
				
					// The variable "video" contains the video object. This is obtained by using document.querySelector().
					// This document method uses the css id class, #player, and grabs the [object HTML VideoElement].
					// The [object HTML VideoElement] resides in <div id="player">
				video = document.querySelector("#player video"); 
									 
					//Removes the poster attribute in the video tag
				video.removeAttribute("poster");
					
					// The source variable is used to hold an array of all the source tags in the 
					// [object HTML VideoElement] from <div id="player">.					
				source = document.querySelectorAll("#player video source"); 
				
					// Using the substring extracted from the user's click choice in <div id="playlist">
					// the three file types for browsers to choose from are concatenated to the string.
					// These thre source files are then stored under the video object located in <div id="player">.
				source[0].src = filename + ".mp4"; 
				source[1].src = filename + ".webm";
				source[2].src = filename + ".ogv"; 
				
					// The video object will load the appropriate source[].src file then play it
				video.load();  
				video.play();

					// When the  video ends the following statement will call the function  test()
					// which will then broadcast the alert message "Video Ended"
				document.getElementById('videoPlayer').addEventListener('ended',test,false);
				
					// This statement will not call the handler function in order to play the next video selection.
//				document.getElementById('videoPlayer').addEventListener('ended',handler,false);
			 
			}; // function handler(e)
			
			function test(){
				alert("Video Ended"); 
			};	
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Video Playlist Tutorial</title>
		<style>
			body {font-family:Arial, Helvetica, sans-serif;background:#fff}
			.center {text-align:center;width:640px;margin:0 auto;}
			#player {background:#000; padding:10px;width:640px;margin:0 auto;border-radius:10px;}
			#player video {width:640px;}
			#playlist {background:#333;list-style:none;padding:0;margin:0; width:640px;}
			#playlist h1 {font: 24px Arial, Helvetica, sans-serif; color:#FFF; font-weight:bold;padding:5px 2px;margin:0;}
			#playlist a {color:#eeeedd;background:#333;padding:10px 5px;display:block;text-decoration:none;border-bottom:1px solid #222;}
			#playlist a:hover {text-decoration:none; background:#999;color:#000}
		</style>
	</head>
	<body>
		<div id="player">  <!-- Assign id to video tag for ended event and to call handler to play next video -->		
			<video id="videoPlayer" controls="controls" width="640" height="360" preload="auto" autoplay >
				<source src="1.mp4" type="video/mp4" />
				<source src="1.webm" type="video/webm" />
				<source src="1.ogv" type="video/ogg" /> 
			</video>
			<div id="playlist">
				<h1>Videos</h1>
				<a href="http://www.w3schools.com/html/movie.mp4">Bear</a> <br>
				<a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Buck Bunny</a>	
			</div>
		</div>
		
		<script>
          </script>
		
	</body>
</html>

1 ответ

  1. Видя, как ваша handler()функция полагается на thisто, чтобы быть нажатым элементом, вы не можете просто вызвать эту функцию, вы должны также установить это-значение на следующий якорь и т. д. и вызвать событие таким образом, чтобы это выглядело так, как это было вызвано фактическим элементом.

    Более простой способ сделать это, было бы просто разделить логику игры, получить следующий элемент и воспроизвести видео

    var video_playlist = document.getElementById("player");
    var links = video_playlist.getElementsByTagName('a');
    
    for (var i = 0; i < links.length; i++) {
        (function(j) {
            links[j].addEventListener('click', function(e) {
                handler.apply(this, [e, j])
            });
        })(i);
    };
    
    function handler(e, index) {
        e.preventDefault();
        var videotarget = this.getAttribute("href");
        
        play(videotarget, index).addEventListener('ended', function() {
            index = (++index) >= links.length ? 0 : index;
            play(links[index].getAttribute("href"), index);
        });
    };
    
    function play(videotarget) {
        var filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
        var video = document.querySelector("#player video");
        var source = document.querySelectorAll("#player video source");
        
        video.removeAttribute("poster");
        source[0].src = filename + ".mp4";
        source[1].src = filename + ".webm";
        source[2].src = filename + ".ogv";
        video.load();
        video.play();
        return video;
    };
    <div id="player">
        <!-- Assign id to video tag for ended event and to call handler to play next video -->
        <video id="videoPlayer" controls="controls" width="640" height="360" preload="auto" autoplay>
            <source src="1.mp4" type="video/mp4" />
            <source src="1.webm" type="video/webm" />
            <source src="1.ogv" type="video/ogg" />
        </video>
        <div id="playlist">
            <h1>Videos</h1>
            <a href="http://www.w3schools.com/html/movie.mp4">Bear</a>
            <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Buck Bunny</a>
        </div>
    </div>