Reputation: 23
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!
Upvotes: 1
Views: 16658
Reputation: 610
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;
}
});
});
Upvotes: 0
Reputation: 44107
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.
Upvotes: 1