VideoJS - Pause streaming media for video elements not in focus - javascript

Is it possible to force VideoJS to stop streaming videos that no longer have the main focus on a page or that have been paused? If, for example, I load two videos and then decide to make one of them fullscreen so the other loses focus or if I switch tab and both lose focus I'd like to not only pause the video from playing but prevent the player continuing to download ( via xhr ) the video stream.
It is simple to call the play and pause methods when needed but I have yet to figure a way that this streaming might also be paused - can anyone suggest how this might be done. I have toyed with removing the video src attribute having seen mention of that somewhere but that results in several errors and did not resolve the problem.
Initially I was using the HLS code ( videojs-contrib-hls.js ) but read somewhere that it might be better using the http streaming code ( videojs-http-streaming.js ) ~ same results.
When playing with the videojs streaming test page the default playlist doesn't exhibit this behaviour but other playlists do cause this downloading behaviour.
The code below is a pseudo facsimile of the real code but works as it stands to reproduce the errors. When either video is maximised &/or both videos are paused you can observe network requests in the console.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Stop VideoJS buffering other videos that do not have focus</title>
<link href='https://unpkg.com/video.js/dist/video-js.css' rel='stylesheet' />
<style>
body,body *{box-sizing:border-box;}
div.container{ width:600px; height:400px; margin:1rem; display:inline-block;clear:none; padding:0; }
video{max-width:600px;max-height:400px;opacity:1}
[type='button'].play{ width:100%; padding:1rem; margin:auto; float:none; position:relative; top:130px; }
[type='button'][name='ctrl']{position:absolute;top:0;left:0}
</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/video.js/7.7.1/video.min.js'></script>
<script src='//unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.js'></script>
<script>
document.addEventListener('DOMContentLoaded',()=>{
let urls=[
'https://edge1.dashmedia.tv/onestudio/gonefishing/playlist.m3u8?fluxustv.m3u8',
'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
];
let players={};
let videos={};
const maximise=function(e){
let player=players[ this.previousElementSibling.id ];
player.requestFullscreen();
};
/*
For any video currently playing that is NOT fullscreen
or not visible ( calculated by IntersectionObserver not shown here )
should be paused and the network stream should be stopped
for the duration. How?
The methods below cause errors. Simply using `player.pause()` will
happily pause the video but it will continue to stream the file
and so causing excessive network usage for hidden items.
*/
document.addEventListener( 'fullscreenchange', event=>{
let player;
let video;
const isFullscreen=function(){
return document.fullscreenElement!==null;
};
Object.keys( videos ).map( id =>{
player=players[ id ];
video=videos[ id ];
if( video && video != event.target.querySelector('video') ){
if( isFullscreen() )player.pause();
else player.play();
}
console.info('%cPlayer:%s Paused:%s','color:yellow;background:fuchsia;',id,player.paused());
});
});
/* event listener to play/stop videos */
document.querySelector('input[name="ctrl"]').addEventListener('click', function(e){
urls.forEach( ( url, index )=>{
let id='player_'+index;
let oCont=document.createElement('div');
oCont.className='container';
let oVideo=document.createElement('video');
oVideo.id=id;
oVideo.width=600;
oVideo.width=400;
let oBttn=document.createElement('input');
oBttn.className='play';
oBttn.type='button';
oBttn.value='Maximise';
oBttn.onclick=maximise;
oCont.appendChild( oVideo );
oCont.appendChild( oBttn );
document.body.appendChild( oCont );
let video_options={
'controls':true,
'autoplay':true,
'preload':'auto',
'muted':true,
children:[]
};
let video=window.player = videojs( id, video_options );
video.src({ src:url, type:'application/x-mpegURL' } );
video.ready( ()=>{
video.name=id;
video.errorDisplay=false;
video.play();
});
video.on('error',function(e){
e.stopImmediatePropagation();
console.info( '%cError:%s\nCode:%s', 'background:lime;color:black;', this.error().message, this.error().code )
video.dispose();
})
players[ id ]=video;
videos[ id ]=oVideo;
});//end forEach
});//end play click handler
});//end listener
</script>
</head>
<body>
<input type='button' name='ctrl' value='Play videos' />
</body>
</html>

Related

How to reset / clear audio element. Tried clearing src and removing the audio element altogether and it still plays

I am having a problem resetting / clearing the audio from an audio element, in another similar question someone suggested removing the src, this however does not seem to make any differance, in that the last loaded url is still playable.
I have had half success, if i clear the html for the player and re-write it the native player does reset and you can no longer play the audio, however you can still play it with a custom play button and the readyState remains at 4?
This is the same also if i just remove the html for the player (and dont rewrite it) you can still play the audio with the custom play button.
This is all demonstrated in the demo code, so my question is how can i reset/clear the data so the custom play button no longer works?
var player = document.getElementById("audioPlayer");
function loadPlayerSRC() {
player.setAttribute(
"src",
"https://jalinburton.com/portfolio/Chocolate-Pen.mp3"
);
updateKnownInfo();
}
function removePlayerSRC() {
player.removeAttribute("src");
updateKnownInfo();
}
function replacePlayerHTML() {
document.getElementById("audioPlayerContainer").innerHTML = "";
document.getElementById("audioPlayerContainer").innerHTML =
"<audio controls id='audioPlayer'></audio>";
updateKnownInfo();
}
function updateKnownInfo() {
document.getElementById("readyState").innerText = player.readyState;
document.getElementById("src").innerText = player.getAttribute("src");
}
updateKnownInfo();
player.addEventListener("loadeddata", (event) => {
updateKnownInfo();
});
function playAudio() {
player.play();
updateKnownInfo();
}
function pauseAudio() {
player.pause();
updateKnownInfo();
}
<div id="audioPlayerContainer">
<audio controls id='audioPlayer'></audio>
</div><button onclick="playAudio();">Play</button><button onclick="pauseAudio();">Pause</button>
<hr />
Steps: <br />
1) <button onclick="loadPlayerSRC();">Load src into player</button> <br />
2) Attempt to reset audio elm simply removing src <button onclick="removePlayerSRC();">Remove scr</button> <br />
2a) Note: the src has cleared but you can still play the audio with both native and custom controls! <br />
3) Attempt to reset audio by removing and re-adding the HTML <button onclick="replacePlayerHTML();">Clear player container HTML and re-add</button> <br />
3a) Note: You can STILL play the audio using the custom controls but now can't play it using the native controls and the ready state is still 4!
<hr />
Current Player Info: <br />
Readystate = <span id="readyState"></span> <br />
src = <span id="src"></span>

To resolve this issue I have had to use both player.src = ""; and player.removeAttribute('src');
player.src = ""; stops it from being played but gives an error in firefox
using player.src = ""; followed by player.removeAttribute('src'); both stops it being played and also gives no errors.

hiding overlay after some time just like standard video player

i am making a custom video player in which there is an overlay containing the controls of the video player
my player starts to work in full length and height.
now i want to hide the overlay after 5 seconds i stop the mouse over.
now the problem is that when the below function mouse over in .ts file is called the synchronization of the timer is harmed.
so if i move my mouse continuously the overlay starts to flicker.
please provide me the solution to the problem.
following is my html code
<div class="video-container" #videoFullscreen>
<div class="video-wrapper" mouse-move>
<video class="video video-js" data-dashjs-player id="myVideo" autoplay #videoPlayer>
<source src="{{ videoSource }}" type="video/mp4" />
</video>
<!-- overlay -->
<div class="overlay" [class.hideOverlay]="hideTop">
<!-- top controls -->
.
.
<!-- lower controls -->
</div>
</div>
this is my type script code
#HostListener('document:mousemove', [ '$event' ]) //fuction to display and hide element sue to mouseover
onMouseMove($event) {
this.hideTop = false;
setTimeout(() => {
this.hideTop = true;
}, 5000);
}
this is my css code :
.overlay {
display: flex;
}
.hideOverlay {
display:none;
}
please help me to solve this problem.

Store the lastHover time and compare against it.
private lastHover = 0;
#HostListener(...)
onMouseMove($event) {
this.lastHover = new Date().getTime()
This.hideTop = true;
setTimeout( () => {
...
if(lastHover + 5000 < new Date().getTime()) {
This.hideTop = true;
}
}, 5000)
}

A neat solution would be to use rxjs to solve this like shown below:
ngOnInit(): void {
fromEvent<MouseEvent>(document, 'mousemove').pipe(tap(() => {
console.log("show it!");
this.hideTop = false
}), switchMap((event) =>
timer(5000).pipe(tap(() => {
console.log("hideit");
this.hideTop = true;
}))
)).subscribe();
}
Don't forget to unsubscribe if your component gets destroyed to prevent memory leaks!
First we make an Observable from the documents mousemove event.
Now if the event triggers we set hideTop to true.
And here comes the interesting part: we use switchMap with a timer Observable. switchMap automatically unsubscribes from the inner Observable if the outer one emits a new value. Therefore the inner Observable only emits after the user actually stopped moving the mouse for 5 seconds.

Apologies that my answer is in jQuery, but the concept is fairly basic
What we need to do is check if the timeout event has already been fired, and reset it on a mousemove event during that time. This is done by checking if the class for hiding the element is applied or not
//Timer variable
var timer;
//Detect mousemove event on parent element
$("html").on("mousemove", "#outer", function() {
//Is the element already hidden?
if ($("#inner").hasClass("hide")) {
//Show the element
$("#inner").removeClass("hide")
} else {
//Reset the timer to 5 seconds
clearTimeout(timer);
timer = setTimeout(hideBox, 5000);
}
})
function hideBox() {
$("#inner").addClass("hide")
}
https://jsfiddle.net/xcL52zf3/1/
You'll need to swap out the jQuery event handlers and element targetting with the equivalent for you TypeScript library

Advice on scaling this code from querySelector to querySelectorAll

I have a custom video player with JS, html and css. Crux of my issue here is I didn't anticipate scaling this from one video, to two videos and I'm looking to refactor this so I can play multiple videos on one page. I've tried rewriting everything into a forEach and haven't been able to crack it. Really just need someone to nudge me in the right direction here:
Fiddle
My thinking was to simply change const player = document.querySelector('.custom-video-player'); to const players = document.querySelectorAll('.custom-video-player'); and then scope something like:
players.forEach((player) => {
// declare all the consts here... and event listeners
})
However, this approach isn't really working. Ideally I wanted to be lazy and not rewrite each instance of player. At this point I'm pretty stuck...
HTML
<div class="cs__video">
<div class="custom-video-player">
<video class="player__video viewer" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
<div class="custom-video-player">
<video class="player__video viewer" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
</div>
JS
/* custom video player javascripts */
// declaring elements
const player = document.querySelector('.custom-video-player');
const video = player.querySelector('.viewer');
/* Build out functions */
function togglePlay() {
console.log('playing');
const method = video.paused ? 'play' : 'pause';
video[method]();
}
/* event listeners */
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
toggle.addEventListener('click', togglePlay);

You may find it easier to manage the multiple players if you create each one from a class that includes all the relevant setup and methods.
Once you create the class for all players it's easy to create as many as you like.
Here's an example that creates an array of two players from an array of video sources (also available as a fiddle).
class Player {
// We call `new Player()` with two arguments, the id
// and the video source
constructor(id, src) {
// We assign both id and src to the class
this.id = id;
this.src = src;
// Then we call two functions, one to generate the
// video HTML, and one to add it to the page
const html = this.generateHTML(id);
this.addHTMLToDOM(html);
}
// We use a template literal to build our HTML
// using the id and src we passed into the class earlier
generateHTML() {
return (
`<div data-player=${this.id}>Player ${this.id}</div>
<video controls width="250">
<source src="${this.src}" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>`
);
}
// This method simply adds the player HTML
// to the document body
addHTMLToDOM(html) {
document.body.insertAdjacentHTML('beforeend', html);
}
// play and pause are a couple of example methods for
// player control. `return this` allows for the methods
// to be chained (see below)
play() {
console.log(`Playing video ${this.id}`);
return this;
}
pause() {
console.log(`Pausing video ${this.id}`);
return this;
}
}
// An array of video sources
const srcs = [
'http://techslides.com/demos/sample-videos/small.mp4',
'http://techslides.com/demos/sample-videos/small.mp4'
]
// `map` over the srcs array to create an array of new players
const players = srcs.map((src, i) => new Player(++i, src));
// An example to show how we can call the player instance methods
players[0].play().pause();
players[1].play().pause();

Play / Pause Audio Upon Button Click Without Delay

I'm looking for a way to make html5 audio play as soon as button is clicked. Right now, it does work; but not very reliably.
My file is a 300Kb MP3 (128Kbps) that is hosted on AWS Cloudfront.
<audio id="i-audio" src="https://cdn/url/to/i-audio.mp3" preload="auto" type="audio/mp3"></audio>
this.iAudio = document.getElementById('i-audio');
$("#button").on('click', function() {
this.iAuido.play();
});
I learn that play() will return a promise; and I'm not sure how can I be sure that audio plays all the time; reliably.
Right now, the play would work at random times or just throw an error.

If you're getting error messages about Promises and .play(), you'll need to treat .play() as a Promise, see this article.
I didn't see any button#button so I'm assuming that's just a typo.
this has no context so it'll be referencing window (very useless)
this.iAudio = document.getElementById('i-audio');
A variable (like var iAudio = ... or const iAudio = ...) should've been declared.
this has context of the element listening to the click event
$("#button").on('click', function() {
this.iAuido.play();
});
Can't imagine that this code worked even randomly it just gets worse as I read the next line. Let's assume iAudio is correct and references the <audio> tag, but for some reason this is prefixed to it (wHy?!?). this would reference the button so every segment of a line of code is all sorts of wrong.
const playback = (e) => {
const mp3 = $('.mp3')[0];
let action = mp3.paused || mp3.ended ? mp3.play() : mp3.pause();
return action;
}
playback().then(() => console.log('Promise Resolved')).catch(error => $('.btn').on('click', playback));
button {
font-size: 5rem;
color: cyan;
border: 0;
background: none;
cursor: pointer
}
button:focus {
outline: none
}
button:hover {
color: tomato;
}
<audio class="mp3" src="https://glsbx.s3.amazonaws.com/-/dd.mp3" preload="auto"></audio>
<button class='btn' type='button'>▶</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Video error - Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

I have recently purchased a video script with a built-in ads system. Seems to work pretty good. I can dynamically add various types of ads, etc. There is an issue, however, with it playing one of my videos. The video file plays fine in Windows, also plays fine in Chrome and Edge. It also played fine using a native HTML5 video player, as well as with video.js. When I switched to this new script, I tested out all of my videos and saw that one video that previously worked as I mentioned, no longer will play. In the Google console it provides the message "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()."
Unlike the other video players that I have used, all of the HTML tags for this player are generated by the js file which grabs the video file location, thumb location, ad locations / times, etc. from the dynamically generated divs, etc.
I have researched A LOT regarding this issue, and I can't seem to figure out what the problem is. Please take a look at the code and let me know if anyone sees anything that sticks out. Thanks in advance! Oh, and I should say that all other videos work with this new player, besides this one.
Note: Since the JS file has >300k lines I cannot include it in this message area, however you can view the JS file here: https://www.stoners.org/videos/java/vplayer.unmin.js
I initialize the player with this:
<script src="/videos/java/vplayer.unmin.js" type="text/javascript"></script>
<script type="text/javascript">
FWDUVPUtils.onReady(function(){
new FWDUVPlayer({
//main settings
instanceName:"player1",
parentId:"myDiv",
playlistsId:"playlists",
mainFolderPath:"content",
skinPath:"minimal_skin_dark",
displayType:"responsive",
initializeOnlyWhenVisible:"no",
useFontAwesomeIcons:"no",
fillEntireVideoScreen:"no",
useHEXColorsForSkin:"no",
normalHEXButtonsColor:"#FF0000",
selectedHEXButtonsColor:"#000000",
useDeepLinking:"yes",
rightClickContextMenu:"default",
addKeyboardSupport:"yes",
showPreloader:"yes",
preloaderColors:["#999999", "#FFFFFF"],
autoScale:"yes",
showButtonsToolTip:"yes",
stopVideoWhenPlayComplete:"no",
playAfterVideoStop:"no",
autoPlay:"yes",
loop:"no",
shuffle:"no",
showErrorInfo:"yes",
maxWidth:980,
maxHeight:552,
buttonsToolTipHideDelay:1.5,
volume:.8,
backgroundColor:"#000000",
videoBackgroundColor:"#000000",
posterBackgroundColor:"#000000",
buttonsToolTipFontColor:"#5a5a5a",
//logo settingscate
showLogo:"yes",
hideLogoWithController:"no",
logoPosition:"topRight",
logoLink:"https://www.stoners.org/videos",
logoMargins:5,
//playlists/categories settings
showPlaylistsSearchInput:"no",
usePlaylistsSelectBox:"no",
showPlaylistsButtonAndPlaylists:"no",
showPlaylistsByDefault:"no",
thumbnailSelectedType:"opacity",
startAtPlaylist:0,
buttonsMargins:0,
thumbnailMaxWidth:350,
thumbnailMaxHeight:350,
horizontalSpaceBetweenThumbnails:40,
verticalSpaceBetweenThumbnails:40,
inputBackgroundColor:"#333333",
inputColor:"#999999",
//playlist settings
showPlaylistButtonAndPlaylist:"no",
playlistPosition:"right",
showPlaylistByDefault:"yes",
showPlaylistName:"yes",
showSearchInput:"no",
showLoopButton:"yes",
showShuffleButton:"yes",
showNextAndPrevButtons:"yes",
showThumbnail:"yes",
forceDisableDownloadButtonForFolder:"yes",
addMouseWheelSupport:"yes",
startAtRandomVideo:"no",
stopAfterLastVideoHasPlayed:"no",
folderVideoLabel:"VIDEO ",
playlistRightWidth:310,
playlistBottomHeight:599,
startAtVideo:0,
maxPlaylistItems:50,
thumbnailWidth:70,
thumbnailHeight:70,
spaceBetweenControllerAndPlaylist:2,
spaceBetweenThumbnails:2,
scrollbarOffestWidth:8,
scollbarSpeedSensitivity:.5,
playlistBackgroundColor:"#000000",
playlistNameColor:"#FFFFFF",
thumbnailNormalBackgroundColor:"#1b1b1b",
thumbnailHoverBackgroundColor:"#313131",
thumbnailDisabledBackgroundColor:"#272727",
searchInputBackgroundColor:"#000000",
searchInputColor:"#999999",
youtubeAndFolderVideoTitleColor:"#FFFFFF",
folderAudioSecondTitleColor:"#999999",
youtubeOwnerColor:"#888888",
youtubeDescriptionColor:"#888888",
mainSelectorBackgroundSelectedColor:"#FFFFFF",
mainSelectorTextNormalColor:"#FFFFFF",
mainSelectorTextSelectedColor:"#000000",
mainButtonBackgroundNormalColor:"#212021",
mainButtonBackgroundSelectedColor:"#FFFFFF",
mainButtonTextNormalColor:"#FFFFFF",
mainButtonTextSelectedColor:"#000000",
//controller settings
showController:"yes",
showControllerWhenVideoIsStopped:"yes",
showNextAndPrevButtonsInController:"no",
showRewindButton:"yes",
showPlaybackRateButton:"yes",
showVolumeButton:"yes",
showTime:"yes",
showQualityButton:"yes",
showInfoButton:"no",
showDownloadButton:"no",
showFacebookButton:"yes",
showEmbedButton:"yes",
showFullScreenButton:"yes",
disableVideoScrubber:"no",
showDefaultControllerForVimeo:"no",
repeatBackground:"yes",
controllerHeight:37,
controllerHideDelay:3,
startSpaceBetweenButtons:7,
spaceBetweenButtons:8,
scrubbersOffsetWidth:2,
mainScrubberOffestTop:14,
timeOffsetLeftWidth:5,
timeOffsetRightWidth:3,
timeOffsetTop:0,
volumeScrubberHeight:80,
volumeScrubberOfsetHeight:12,
timeColor:"#888888",
youtubeQualityButtonNormalColor:"#888888",
youtubeQualityButtonSelectedColor:"#FFFFFF",
//advertisement on pause window
aopwTitle:"Sponsor",
aopwWidth:400,
aopwHeight:240,
aopwBorderSize:6,
aopwTitleColor:"#FFFFFF",
//subtitle
subtitlesOffLabel:"Subtitle off",
//popup add windows
showPopupAdsCloseButton:"yes",
//embed window and info window
embedAndInfoWindowCloseButtonMargins:0,
borderColor:"#333333",
mainLabelsColor:"#FFFFFF",
secondaryLabelsColor:"#a1a1a1",
shareAndEmbedTextColor:"#5a5a5a",
inputBackgroundColor:"#000000",
inputColor:"#FFFFFF",
//audio visualizer
audioVisualizerLinesColor:"#0099FF",
audioVisualizerCircleColor:"#FFFFFF",
//lightbox settings
lightBoxBackgroundOpacity:.6,
lightBoxBackgroundColor:"#000000",
//sticky display settings
showOpener:"yes",
showOpenerPlayPauseButton:"yes",
verticalPosition:"bottom",
horizontalPosition:"center",
showPlayerByDefault:"yes",
animatePlayer:"yes",
openerAlignment:"right",
mainBackgroundImagePath:"https://www.stoners.org/videos/content/minimal_skin_dark/main-background.png",
openerEqulizerOffsetTop:-1,
openerEqulizerOffsetLeft:3,
offsetX:0,
offsetY:0,
//loggin
isLoggedIn:"no",
playVideoOnlyWhenLoggedIn:"no",
loggedInMessage:"Please login to view this video.",
//playback rate / speed
defaultPlaybackRate:1, //0.25, 0.5, 1, 1.25, 1.2, 2
//cuepoints
executeCuepointsOnlyOnce:"no",
//ads
openNewPageAtTheEndOfTheAds:"no",
playAdsOnlyOnce:"no",
adsButtonsPosition:"right",
skipToVideoText:"You can skip ad in: ",
skipToVideoButtonText:"Skip Ad",
adsTextNormalColor:"#888888",
adsTextSelectedColor:"#FFFFFF",
adsBorderNormalColor:"#666666",
adsBorderSelectedColor:"#FFFFFF"
});
});
</script>
You can see that it doesn't work in the player by going here:
https://www.stoners.org/videos/profiles/9/weed-truffles-75mg#/?playlistId=0&videoId=0
You can access the video file in question directly to see that the file will actually open in Chrome, Windows, etc by going here: https://www.stoners.org/videos/library/1527856863.mp4
Please let me know if there is anything else I can provide to help figure out what the problem is. Appreciate it!

I managed to solve this by using the following code:
function fix(item) {
var thePromise = item.play();
if (thePromise != undefined) {
thePromise.then(function(_) {
item.pause();
item.currentTime = 0;
});
}
}
Just execute that with whatever audio/video you have, and it'll stop giving that error.

Great! The fix of Jack Bashford worked.
I added a Video to a Revolution Slider, which needed to be played as soon as the Slide is visible:
HTML Markup:
<div class="tp-caption" data-x="center" data-y="0" data-speed="1500" data-start="500">
<video id="xxx" title="xxx" webkit-playsinline="true" autoplay="true" muted="muted" preload="auto" controls="false" playsinline="true">
<source src="file" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</div>
JavaScript with your fix:
jQuery(document).ready(function() {
$('.owl-carousel').owlCarousel();
App.init();
// RevolutionSlider.initRSfullWidth();
var revapi;
revapi = jQuery('.tp-banner').revolution(
{
delay:5500,
startwidth:1170,
startheight:600,
hideThumbs:10,
navigationType:'none',
navigationStyle:'square',
navigationHAlign:'center',
navigationVAlign:'bottom',
navigationArrows:'none',
onHoverStop: 'off',
navigation: {
onHoverStop: 'off'
}
});
revapi.on('revolution.slide.onchange', function(event, data) {
console.log("Current Slide: "+data.slideIndex);
if(data.slideIndex==2) {
console.log("Play the video v2");
var vid = document.getElementById("fiveyears");
vid.controls = false;
var thePromise = vid.play();
if (thePromise != undefined) {
console.log("Caught Promise Error");
thePromise.then(function(_) {
vid.pause();
vid.currentTime = 0;
vid.play();
});
} else {
vid.play();
}
vid.controls = false;
}
});
});

Categories