Un utilisateur a demand√© ūüĎá

Ma derni√®re question a √©t√© signal√©e automatiquement et je ne la trouve pas…

Je peux lire des vidéos youtube en utilisant le WP_custom_header_markup() qui crée la section Media Header dans le personnalisateur.

Le probl√®me est que si vous cr√©ez un bouton qui, je pense, ne fonctionne qu’avec une vid√©o .mp4 t√©l√©charg√©e qui serait t√©l√©charg√©e dans la m√©diath√®que WP …

Je regarde le fichier wp_custom-header.js et vois ce qui suit pour la section youtube.

/* WHETHER THE VIDEO IS PAUSED. @return {boolean} */

isPaused: function() { return YT.PlayerState.PAUSED === this.player.getPlayerState(); },

/* PAUSE THE VIDEO */

pause: function() { this.player.pauseVideo(); },

/* PLAY THE VIDEO */

play: function() { this.player.playVideo(); }

mais j’ai du mal √† les faire fonctionner avec les boutons que je cr√©e.

voil√† ce que j’ai :

<span id="playPause" class="fa-stack fa-3x" onclick="playPause()">
    <i class="fal fa-circle fa-stack-2x"></i>
    <i class="far fa-pause fa-stack-1x fa-inverse"></i>
</span>

<script>

	var myVideo = document.getElementById("playPause");

	function playPause() { 
	    if (myVideo.isPaused) {
	        myVideo.playVideo();
	        jQuery(".fa-stack .fa-stack-1x").removeClass("fa-play");
	        jQuery(".fa-stack .fa-stack-1x").addClass("fa-pause");
	    }
	    else {
	        myVideo.pauseVideo();
	        jQuery(".fa-stack .fa-stack-1x").removeClass("fa-pause");
	        jQuery(".fa-stack .fa-stack-1x").addClass("fa-play");	
	    }
	}

</script>

Quelqu’un peut-il me dire ce que je fais mal? Dois-je me concentrer sur l’iframe #wp-custom-header-video¬†?


(@bcworkz)

il y a 1 an, 1 mois

Vous devez avoir acc√®s √† l’objet joueur qui contient la propri√©t√© .isPaused. Il semble qu’il se concentre uniquement sur le widget, ce qui n’affecte que son apparence sans perturber l’objet joueur. L’objet joueur n’est probablement pas un √©l√©ment DOM, ce serait un artefact JS qui interagit avec les √©l√©ments DOM. Malheureusement, je ne peux pas vous dire comment acc√©der √† l’objet joueur. D√©sol√©, je ne peux pas √™tre plus pr√©cis, mais j’esp√®re que vous avez une meilleure id√©e de ce qu’il faut rechercher maintenant.


(@biens)

il y a 1 an, 1 mois

c’est le code exact dans le fichier principal WP wp-custom-header.js (reprogramm√© et √©dit√©)

YouTubeHandler = BaseHandler.extend(/** @lends wp.YouTubeHandler.prototype */{
		
		/* 	WHETHER THE HANDLER SUPPORTS A VIDEO.
			@param {object} settings Video settings.
		  	@return {boolean}
		*/

		test: function( settings ) {
			return 'video/x-youtube' === settings.mimeType;
		},

		/* SET UP A YOUTUBE IFRAME. LOADS THE YOUTUBE IFRAME API IF THE 'YT' GLOBAL DOESN'T EXIST */

		ready: function() {
			var handler = this;

			if ( 'YT' in window ) {
				YT.ready( handler.loadVideo.bind( handler ) );
			}
			else {
				var tag = document.createElement( 'script' );
				tag.src="https://www.youtube.com/iframe_api";
				tag.onload = function () {
					YT.ready( handler.loadVideo.bind( handler ) );
				};

				document.getElementsByTagName( 'head' )[0].appendChild( tag );
			}
		},

		/* LOAD A YOUTUBE VIDEO */

		loadVideo: function() {

			var handler = this,
				video = document.createElement( 'div' ),
				// @link http://stackoverflow.com/a/27728417
				VIDEO_ID_REGEX = /^.*(?:(?:youtu.be/|v/|vi/|u/w/|embed/)|(?:(?:watch)??v(?:i)?=|&v(?:i)?=))([^#&?]*).*/;

			video.id = 'wp-custom-header-video';
			handler.setVideo( video );

			handler.player = new YT.Player( video, {
				height: this.settings.height,
				width: this.settings.width,
				videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
				events: {
										
					onReady: function(e) {
						e.target.mute();  // SOUND FOR VIDEO
						onPlayerReady;
						handler.showControls();
					},
					onStateChange: function(e) {

						//onPlayerStateChange();

						if ( YT.PlayerState.PLAYING === e.data ) {
							handler.trigger( 'play' );
						}
						else if ( YT.PlayerState.PAUSED === e.data ) {
							handler.trigger( 'pause' );
						}
						else if ( YT.PlayerState.ENDED === e.data ) {
							e.target.playVideo();
						}
					}
				},
				playerVars: {
					autoplay: 1,
					controls: 0,
					disablekb: 1,
					start: 12, // IN SECONDS
					//end: 300,
					fs: 0,
					iv_load_policy: 3,
					loop: 1,
					modestbranding: 1,
					playsinline: 1,
					rel: 0,					
					showinfo: 0,
					enablejsapi: 1
				}
			});

			function onPlayerReady() {
			  	
			  	// bind events
			  	var playButton = document.getElementById("play");

			  	playButton.addEventListener("click", function() {
			    	this.player.playVideo();
			  	});

			  	var pauseButton = document.getElementById("pause");

			  	pauseButton.addEventListener("click", function() {
			    	this.player.pauseVideo();
			  	});

			  	/*document.getElementById('play').onclick = function() {
			        this.player.playVideo();
			    };
			    document.getElementById('pause').onclick = function() {
			        this.player.pauseVideo();
			    };*/

			}

						
		},
		
		/* WHETHER THE VIDEO IS PAUSED. @return {boolean} */

		isPaused: function() { return YT.PlayerState.PAUSED === this.player.getPlayerState(); },

		/* PAUSE THE VIDEO */

		pause: function() {
			this.player.pauseVideo(); 
	  	},

		/* PLAY THE VIDEO */

		play: function() {
			this.player.playVideo(); 
		}

	});


(@bcworkz)

il y a 1 an, 1 mois

¬Į _ („ÉĄ) _ / ¬Į Je n’aime pas JavaScript OO. AFAICT, c’est la d√©claration de classe qui vous indiquerait comment utiliser l’objet, mais vous avez toujours besoin de l’exemple d’objet actuel du lecteur. Quelque part le code a fait quelque chose comme var notThisVar = new YouTubeHandler();. D√©couvrez cela et un gestionnaire d’√©v√©nements de clic de bouton pourrait le faire pour vous notThisVar.play(); Soit notThisvar.pause();. Bien s√Ľr notThisBVar voici juste un exemple et cela ne fonctionnera pas pour vous, vous devez d√©terminer le type auquel le cas a √©t√© attribu√© et esp√©rer que cela rentre dans le cadre de votre code.


(@biens)

il y a 1 an, 1 mois

enfin fait‚Ķ pour tous ceux qui cherchent √† obtenir des boutons personnalis√©s fonctionnant pour le noyau WP wp-custom-header.js‚Ķ. fondamentalement, tout ce que vous aviez √† faire √©tait d’appeler une fonction

onReady: onPlayerReady();

puis ci-dessous :

function onPlayerReady() {

// BIND EXTERNAL PLAY / PAUSE / VOLUME 

var playButton = document.getElementById("playPause");

playButton.addEventListener("click", function() {

    var state = handler.player.getPlayerState();

    if (state==2) {
        handler.player.playVideo();
        jQuery("#playPause .fa-stack-1x").removeClass("fa-play");
	jQuery("#playPause .fa-stack-1x").addClass("fa-pause");

        // BG ANIMATIONS
				        
	setTimeout(function() { 
				        	 
           jQuery("#hero_text").removeClass("darken-overlay-on-pause");
	   jQuery(".wp-custom-header iframe").removeClass("crap-fix-for-ytp-pause-overlay"); 
        }, 500);
    }
    else {
        handler.player.pauseVideo();

        jQuery("#playPause .fa-stack-1x").removeClass("fa-pause");
	jQuery("#playPause .fa-stack-1x").addClass("fa-play"); 
        jQuery(".wp-custom-header iframe").addClass("crap-fix-for-ytp-pause-overlay");
					}
    });

			  	//////////////////////////////
			  	// TOGGLE MUTE / UNMUTE BUTTON
			  	//////////////////////////////
    var muteButton = document.getElementById("muteUnmute");

    muteButton.addEventListener("click", function() {
        if(handler.player.isMuted()) {
            handler.player.unMute();
	    jQuery("#muteUnmute .fa-stack-1x").removeClass("fa-volume");
	    jQuery("#muteUnmute .fa-stack-1x").addClass("fa-volume-mute");
        }
        else {
	    handler.player.mute();
	    jQuery("#muteUnmute .fa-stack-1x").removeClass("fa-volume-mute");
            jQuery("#muteUnmute .fa-stack-1x").addClass("fa-volume");
	}
    });
}


(@biens)

il y a 1 an, 1 mois

résolu

Cette réponse a été modifiée il y a 1 an et 1 mois par.


(@guenni007)

il y a 9 mois, 3 semaines

Avez-vous des exemples d’utilisation du script dans votre installation WP¬†? Je cherche une m√©thode pour me d√©barrasser de ytp-break-overlay et des vid√©os associ√©es √† la fin.


(@biens)

il y a 9 mois, 3 semaines

Bonjour @guenni007 !

Oui, j’ai une solution pour √ßa aussi. C’est un peu hacky, mais depuis que YT a ajout√© la possibilit√© de ne pas afficher les vid√©os associ√©es, voici ce que j’ai fait…

Je viens d’impl√©menter une transformation¬†: scale(1.9)¬†! Important; √† l’iframe .wp-custom-header lorsque vous cliquez sur le bouton pause, en une demi-seconde, ce qui est plus rapide que les vid√©os contextuelles associ√©es. Je pense que √ßa marche…

function onPlayerReady() {

				// BIND EXTERNAL PLAY / PAUSE / VOLUME / PROGRESS UI'S - SHANE - 9/14/19

				/////////////////////////////
			  	// TOGGLE PLAY / PAUSE BUTTON
			  	/////////////////////////////

			  	var playButton = document.getElementById("playPause");

			  	playButton.addEventListener("click", function() {

			  		var state = handler.player.getPlayerState();

					if (state==2) {
						handler.player.playVideo();

						// BUTTON

						jQuery("#playPause .fa-stack-1x").removeClass("fa-play");
				        jQuery("#playPause .fa-stack-1x").addClass("fa-pause");

				        // BG ANIMATIONS
				        
				        setTimeout(function() { 
				        	jQuery("#hero_text").removeClass("darken-overlay-on-pause");
				        	jQuery(".wp-custom-header iframe").removeClass("crap-fix-for-ytp-pause-overlay"); 

				        	// THIS WORKS ON SINGLE PROPERTY PAGES FOR NOW
				        	jQuery("#hero_video_layer").removeClass("darken-overlay-on-pause");

				        }, 500);
					}
					else {
						handler.player.pauseVideo();

						// BUTTON 

						jQuery("#playPause .fa-stack-1x").removeClass("fa-pause");
				        jQuery("#playPause .fa-stack-1x").addClass("fa-play");

				        // BG ANIMATIONS

				        //jQuery("#hero_text").addClass("darken-overlay-on-pause");
				        jQuery(".wp-custom-header iframe").addClass("crap-fix-for-ytp-pause-overlay");

				        // THIS WORKS ON SINGLE PROPERTY PAGES FOR NOW
				        jQuery("#hero_video_layer").addClass("darken-overlay-on-pause");

					}
				});

			  	//////////////////////////////
			  	// TOGGLE MUTE / UNMUTE BUTTON
			  	//////////////////////////////

			  	var muteButton = document.getElementById("muteUnmute");

			  	muteButton.addEventListener("click", function() {
					if(handler.player.isMuted()) {
						handler.player.unMute();
						jQuery("#muteUnmute .fa-stack-1x").removeClass("fa-volume");
				        jQuery("#muteUnmute .fa-stack-1x").addClass("fa-volume-mute");
					}
					else {
						handler.player.mute();
						jQuery("#muteUnmute .fa-stack-1x").removeClass("fa-volume-mute");
				        jQuery("#muteUnmute .fa-stack-1x").addClass("fa-volume");
					}
				});

				//////////////////////////
				// CURRENT TIME / DURATION
				//////////////////////////

				// UPDATE THE CONTROLS ON LOAD

			    updateTimerDisplay();
			    updateProgressBar();

			    // CLEAR ANY OLD INTERVAL

			    clearInterval(time_update_interval);

			    // START INTERVAL TO UPDATE ELAPSED TIME DISPLAY AND THE ELAPSED PART OF THE PROGRESS BAR EVERY SECOND

			    var time_update_interval;

			    time_update_interval = setInterval(function () {
			        updateTimerDisplay();
			        updateProgressBar();
			    }, 100)				

				function updateTimerDisplay() {

					var currentTime = document.getElementById("current-time");
					var duration = document.getElementById("duration");

				    // UPDATE CURRENT TIME TEXT DISPLAY

				    jQuery('#current-time').text(formatTime( handler.player.getCurrentTime() ));
				    jQuery('#duration').text(formatTime( handler.player.getDuration() ));
				}

				function formatTime(time) {
				    time = Math.round(time);

				    var minutes = Math.floor(time / 60),
				    seconds = time - minutes * 60;

				    seconds = seconds < 10 ? '0' + seconds : seconds;

				    return minutes + ":" + seconds;
				}

				//////////////////////
				// PROGRESS BAR SLIDER
				//////////////////////

			  	var progressBar = document.getElementById("progress-bar");

			  	jQuery('#progress-bar').on('mouseup touchend', function (e) {

				    // CALCULATE THE NEW TIME FOR THE VIDEO.
				    // new time in seconds = total duration in seconds * ( value of range input / 100 )
				    
				    var newTime = handler.player.getDuration() * (e.target.value / 100);

				    // SKIP VIDEO TO NEW TIME

				    handler.player.seekTo(newTime);
				});

				function updateProgressBar(currstep) {
				    
				    // UPDATE THE VALUE OF THE PROGRESS BAR ACCORDINGLY

				    jQuery('#progress-bar').val((handler.player.getCurrentTime() / handler.player.getDuration()) * 100);
				}

				/*

				// USE THIS FOR PROGRESS BAR 

				setProgress = function(currstep) {
					var percent = parseFloat(100 / widget.length) * currstep;
					percent = percent.toFixed();
					jQuery(".progress-bar").css("width",percent+"%").html(percent+"%");
				}
				*/

			}

et c’√©tait le CSS que j’ai appliqu√© √† onclick

.crap-fix-for-ytp-pause-overlay {
    
  -webkit-filter: grayscale(100%); 
          filter: grayscale(100%);

  transform: scale(1.9) !important;
}

ou tu peux faire ça

.darken-overlay-on-pause {
  background-color: rgba(0,0,0,.3) !important;
}

voici un exemple de page inachev√©e qui sera de retour en mode compilation dans 30 minutes… Ce n’est pas fini, mais vous voyez l’id√©e

Cette réponse a été modifiée il y a 9 mois et 3 semaines par.

Cela a-t-il résolu votre problème ?

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *