CODEWITHSUNDEEP
javascripthtml
user2255592
user2255592

Reputation: 167

HTML5 video player stuck at poster

I'm trying to make my own custom controls for HTML5 video. So far I've only implemented a play/pause button, but I've run into a problem.

The video does not play at startup, so when I click the custom play button, I can hear the video's audio - but the video is stuck at the poster image.

I have a JSFiddle of my demo with the problem (try clicking the play button): https://jsfiddle.net/9gpg6gbd/

This is the snippet of the play/pause button's code:

// Initialize play button
if (video.paused) {
    container.querySelector("#supervideo-playbutton").innerHTML = "►"
} else {
    container.querySelector("#supervideo-playbutton").innerHTML = "| |"
}
container.querySelector("#supervideo-playbutton").addEventListener("click", function(){
    if (video.paused) {
        video.play();
        container.querySelector("#supervideo-playbutton").innerHTML = "| |"
    } else {
        video.pause();
        container.querySelector("#supervideo-playbutton").innerHTML = "►"
    }
});

Any help would be much appreciated, I'm stumped on this one.

Upvotes: 2

Views: 1592

Answers (1)

David Antoon
David Antoon

Reputation: 825

You have to errors:

  1. Do not add your HTML element inside the video tag.
  2. Do not hold video element in variable and change it's place.

Solution #1:

Replace your video.play() with the selector.

function initializeControls(container, video) {
	// Initialize play button
	if (video.paused) {
        container.querySelector("#supervideo-playbutton").innerHTML = "►"
    } else {
        container.querySelector("#supervideo-playbutton").innerHTML = "| |"
    }
    container.querySelector("#supervideo-playbutton").addEventListener("click", function(){
    	if (document.body.querySelectorAll(".supervideo")[0].paused) {
    		document.body.querySelectorAll(".supervideo")[0].play();
    		container.querySelector("#supervideo-playbutton").innerHTML = "| |"
    	} else {
      	document.body.querySelectorAll(".supervideo")[0].pause();
    		container.querySelector("#supervideo-playbutton").innerHTML = "►"
    	}
	});
}

function createVidElement() {
	var videos = document.body.querySelectorAll(".supervideo");

	[].forEach.call(videos, function(video) {
		// Hide controls if the player has tdem
		if (video.hasAttribute("controls")) {
			video.controls = false;
		}
		// Create video container
		var container = document.createElement('div');
    	container.setAttribute("class", "supervideo-container");
    	video.parentElement.appendChild(container);
    	container.appendChild(video);
    	// Created media controls
    	container.innerHTML = container.innerHTML + '<table cellpadding="0" cellspacing="0" id="supervideo-controls"><tr> <td><button id="supervideo-playbutton" type="button">&#215;</button></td> <td>Time</td> <td>Scrollbar</td> <td>Mute button</td> <td>Volume</td> <td>Fullscreen</td> </tr></table>';
    	initializeControls(container, video);
	});
}

createVidElement();
<video width="100%" controls class="supervideo">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" />
</video>

Solution #2:

Inside the foreach you changed the position of the <Video> tag. you appended it to the new container. after this line your selector will be invalid, you have to reassign your selector.

function initializeControls(container, video) {
	// Initialize play button
	if (video.paused) {
        container.querySelector("#supervideo-playbutton").innerHTML = "&#9658;"
    } else {
        container.querySelector("#supervideo-playbutton").innerHTML = "| |"
    }
    container.querySelector("#supervideo-playbutton").addEventListener("click", function(){
    	if (video.paused) {
    		video.play();
    		container.querySelector("#supervideo-playbutton").innerHTML = "| |"
    	} else {
    		video.pause();
    		container.querySelector("#supervideo-playbutton").innerHTML = "&#9658;"
    	}
	});
}

function createVidElement() {
	var videos = document.body.querySelectorAll(".supervideo");

	[].forEach.call(videos, function(video) {
		// Hide controls if the player has tdem
		if (video.hasAttribute("controls")) {
			video.controls = false;
		}
		// Create video container
		var container = document.createElement('div');
    	container.setAttribute("class", "supervideo-container");
    	video.parentElement.appendChild(container);
    	
      //container.appendChild(video);
    	
      // Created media controls
    	container.innerHTML = container.innerHTML + '<table cellpadding="0" cellspacing="0" id="supervideo-controls"><tr> <td><button id="supervideo-playbutton" type="button">&#215;</button></td> <td>Time</td> <td>Scrollbar</td> <td>Mute button</td> <td>Volume</td> <td>Fullscreen</td> </tr></table>';
    	initializeControls(container, video);
	});
}

createVidElement();
<video width="100%" controls class="supervideo">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" />
</video>

Upvotes: 1

Related Questions