I am trying to get a HTML5 clip to play only once on first arrival/pageload to the home page and then not play again. Also I would like the video to fadeout and disappear after it's played. I know you can do this with JQuery once and fadeout, but I'm a beginner and I am struggling with the syntax. Can a more experienced coder help me adjust my code so this works please? Here's what I have so far!
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function(){
$("#video").one("load", function(){
$('#video').get(0).play()
});
</script>
</head>
<body>
<h2>This is a website</h2>
<video id="video">
<source src="clip.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
I am trying to get a HTML5 clip to play only once on first arrival/pageload to the home page and then not play again. Also I would like the video to fadeout and disappear after it's played. I know you can do this with JQuery once and fadeout, but I'm a beginner and I am struggling with the syntax. Can a more experienced coder help me adjust my code so this works please? Here's what I have so far!
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function(){
$("#video").one("load", function(){
$('#video').get(0).play()
});
</script>
</head>
<body>
<h2>This is a website</h2>
<video id="video">
<source src="clip.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
3 Answers
Reset to default 1You can use html "autoplay" property to play video once page loaded as here.
<div id="video">
<video width="100%" height="auto" autoplay="autoplay">
<source src="monarch.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="monarch.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
then use jquery to to fade out the vedio after play as below,
$('#video video').bind('ended', function(){
$(this).parent().fadeOut()
});
Created a fiddle for you here: https://jsfiddle/Safoora/ddukpcbd/1/ Hope it will help.
UPDATE
OP requests that the state of the video is persistent. I suggested cookies or localStorage. The following update is hosted on PLUNKER but not on the Snippet because there's strict security measures that are inhibiting the use of localStorage.
There's a basic flow to the demonstration you should adhere to initially:
- Upon initial page load, the video plays and the console says:
Cache set to: played
- After the video has ended and faded out, reload the page. Notice that the video is no longer present nor is it playing. The console now says:
Cache is: played
- Reload the page several times and it will not change.
- Should you have the need to revert the page back to it's original state, I have added a Delete Cache button that deletes that specific key that stores the information responsible for keeping the page at the state of post video playback.
- Once the Delete Cache button is clicked, the console should say:
undefined
This means that the cache was successfully deleted. Details are mented within the PLUNKER
Create a
<video> dynamically and remove it from the DOM on the ended event. Details mented in Snippet.
SNIPPET
// Create and reference video element
var vid = document.createElement('video');
// Add class for styling
vid.classList.add('playing');
// Add a src to .vid
vid.src = 'http://media6000.dropshots./photos/1381926/20170326/023642.mp4';
// Load .vid
vid.load();
// Add .vid to body
document.body.appendChild(vid);
// Play video
vid.play();
/* Register ended event to vid
|| After video has ended...
*/
vid.addEventListener('ended', function(e) {
// Pause vid
vid.pause()
/* Reset time played. This method used
|| along with .pause() is equivelant to "stop"
*/
vid.currentTime = 0;
// Simulate a `non-playing state`
vid.classList.remove('playing');
/* Delay the call to remove vid in order
|| to preserve the fade ouyt effect.
*/
setTimeout(function() {
document.body.removeChild(vid);
}, 2000);
}, false);video.playing {
opacity: 1;
transition: opacity 3s ease;
}
video {
opacity: 0;
transition: opacity 3s ease;
}I resolved this in a different way:
index.html is the video clip, after the video is ended I used this code below to make the video disappear and move onto the home page which is home.html
<meta http-equiv="Refresh" content="9;url=home.html"
Included in index.html are 2 javascript if statements, to redirect immediately to home.html if the screen width is less than 600 pixels, because mobile phones won't autoplay videos. 2 similar if statements were used to ensure the if statements worked in as many browsers as possible. Below are the if statements used:
<script type="text/javascript">
<!--
if (screen.width <= 600) {
window.location = "home.html";
}
//-->
</script>
<script type="text/javascript">
<!--
if (window.innerWidth <= 600) {
document.location = "home.html";
}
//-->
</script>
Originally I asked the question because I wanted the video to play only once per entire visit to the website and keep the video in the same html page as the home page, rather than a different page as I have now. Jquery one would not have achieved this, as that would have made the video play once per page load, not once per website visit. However other methods like session cookies or javascript session storage could have kept this video feature in the same page. But this solution resolved the issue well and simply so I used that method.
To further improve this, I added an event listener on to only move onto the next page when the video was ended, not at 9 seconds like this:
<meta http-equiv="Refresh" content="9;url=home.html"
but only when ended (incase the browser is slow to load and 9 seconds is not enough)
<script>
video=document.getElementById('myvid').addEventListener('ended',function(){
window.location.href='home.html';
});
</script>
The Javascript above assumes the video has an id="myvid"