Pregunta sobre Developing with WordPress de Wordpress:

reproducir / pausar para YouTube con the_custom_header_markup ()

Un usuario preguntó 👇

Mi última pregunta se marcó automáticamente y no puedo encontrarla …

Puedo reproducir videos de youtube usando the_custom_header_markup () WP que crea la sección Media Header en el personalizador.

El problema es si crea un botón que creo que solo funciona con un video .mp4 cargado que subiría a la biblioteca de medios de WP …

Estoy mirando el archivo wp_custom-header.js y veo lo siguiente para la sección de 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(); }

pero me resulta difícil ponerlos a trabajar con los botones que creo.

esto es lo que tengo:

<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>

¿Alguien puede decirme qué estoy haciendo mal? ¿Debo concentrarme en el iframe # wp-custom-header-video?

(@bcworkz)

Hace 1 año, 1 mes

Debe tener acceso al objeto del reproductor que contiene la propiedad .isPaused. Parece que solo se está enfocando en el elemento gráfico, que solo afecta su apariencia sin molestar al objeto del jugador. El objeto player probablemente no sea un elemento DOM, sería un artefacto JS que interactúa con elementos DOM. Lamentablemente, no puedo decirte cómo acceder al objeto del jugador. Lo siento, no puedo ser más específico, pero espero que tenga una mejor idea de qué buscar ahora.

(@propertunidad)

Hace 1 año, 1 mes

este es el código exacto en el archivo principal de WP wp-custom-header.js (reprogramado y editado)

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)

Hace 1 año, 1 mes

¯ _ (ツ) _ / ¯ No me gusta JavaScript OO. AFAICT, esa es la declaración de clase que le diría cómo usar el objeto, pero aún necesita el ejemplo del objeto del jugador actual. En algún lugar el código hizo algo como var notThisVar = new YouTubeHandler();. Descubra esto y un controlador de eventos de clic de botón podría hacerlo por usted notThisVar.play(); o notThisvar.pause();. Por supuesto notThisBVar aquí es solo un ejemplo y no funcionará para usted, debe determinar el tipo al que se asignó el caso y esperar que esté dentro del alcance de su código.

(@propertunidad)

Hace 1 año, 1 mes

finalmente lo logró … para cualquiera que busque que los botones personalizados funcionen para WP core wp-custom-header.js…. básicamente, todo lo que tenías que hacer era llamar a una función

onReady: onPlayerReady();

y luego abajo:

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");
	}
    });
}

(@propertunidad)

Hace 1 año, 1 mes

resuelto

Esta respuesta fue modificada hace 1 año, 1 mes por.

(@ guenni007)

Hace 9 meses, 3 semanas

¿Tiene algún ejemplo de cómo usa el script en su instalación de WP? Estoy buscando un método para deshacerme de ytp-break-overlay y videos relacionados al final.

(@propertunidad)

Hace 9 meses, 3 semanas

¡Hola @ guenni007!

Sí, también tengo un arreglo para eso. Es un poco hacky, pero como YT agregó la capacidad de no mostrar videos relacionados, esto es lo que hice …

Acabo de implementar una transformación: ¡escala (1.9)! Importante; al iframe .wp-custom-header cuando hace clic en el botón de pausa, en medio segundo, que es más rápido que los videos emergentes asociados. Creo que funciona …

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+"%");
				}
				*/

			}

y este fue el CSS que apliqué a onclick

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

  transform: scale(1.9) !important;
}

o podrías hacer esto

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

aquí hay un ejemplo de una página sin terminar que volverá a estar en modo de compilación en 30 minutos … No está terminado, pero entiendes la idea

Esta respuesta fue modificada hace 9 meses, 3 semanas por.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *