completeidiothereDoh
completeidiothereDoh

Reputation: 23

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!

Upvotes: 1

Views: 16658

Answers (2)

David P. P.
David P. P.

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

Jack Bashford
Jack Bashford

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

Related Questions