Erreur vidéo - Non capturé (promis) DOMException: la requête play () a été interrompue par un appel à pause
J'ai récemment acheté un script vidéo avec un système d'annonces intégré. Semble travailler assez bien. Je peux ajouter de manière dynamique divers types d’annonces, etc. Il ya cependant un problème avec la lecture d’une de mes vidéos. Le fichier vidéo est correctement lu dans Windows, ainsi que dans Chrome et Edge. Il a également bien fonctionné à l'aide d'un lecteur vidéo HTML5 natif, ainsi que de video.js. Lorsque je suis passé à ce nouveau script, j'ai testé toutes mes vidéos et vu qu'une vidéo qui fonctionnait auparavant, comme je l'ai mentionné, ne sera plus lue. Dans la console Google, le message "UnException (dans la promesse) DOMException: la demande play () a été interrompue par un appel à pause ()".
Contrairement aux autres lecteurs vidéo que j'ai utilisés, toutes les balises HTML de ce lecteur sont générées par le fichier js qui récupère l'emplacement du fichier vidéo, l'emplacement du curseur, les emplacements/heures des annonces, etc. à partir des div générés de manière dynamique, etc.
J'ai fait beaucoup de recherches sur ce problème et je n'arrive pas à comprendre le problème. S'il vous plaît jetez un oeil sur le code et laissez-moi savoir si quelqu'un voit quelque chose qui ressort. Merci d'avance! Oh, et je devrais dire que toutes les autres vidéos fonctionnent avec ce nouveau lecteur, à part celui-ci.
Remarque: comme le fichier JS contient plus de 300 000 lignes, je ne peux pas l'inclure dans cette zone de message. Toutefois, vous pouvez afficher le fichier JS ici: https://www.stoners.org/videos/Java/vplayer.unmin.js
J'initialise le lecteur avec ceci:
<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>
Vous pouvez voir que cela ne fonctionne pas dans le lecteur en allant ici: https://www.stoners.org/videos/profiles/9/weed-truffles-75mg#/?playlistId=0&videoId=0
Vous pouvez accéder directement au fichier vidéo en question pour voir qu'il s'ouvrira effectivement dans Chrome, Windows, etc. en cliquant ici: https://www.stoners.org/videos/library/1527856863.mp4
S'il vous plaît, laissez-moi savoir s'il y a quelque chose que je peux fournir pour aider à comprendre quel est le problème. Appréciez le!
J'ai réussi à résoudre ce problème en utilisant le code suivant:
function fix(item) {
var thePromise = item.play();
if (thePromise != undefined) {
thePromise.then(function(_) {
item.pause();
item.currentTime = 0;
});
}
}
Exécutez-le simplement avec l’audio/vidéo que vous avez et cela cessera de donner l’erreur.
Génial! La solution de Jack Bashford a fonctionné.
J'ai ajouté une vidéo à un curseur de révolution, qui devait être lue dès que la diapositive est visible:
Marquage HTML:
<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 avec votre solution:
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;
}
});
});