Si se ha encontrado navegando recientemente en sitios web de medios (servicios de transmisión de video, sitios web de noticias, Facebook, etc.) puede haber notado una tendencia con respecto a sus reproductores de video. Si nos desplazamos hacia abajo en una página donde hay un video, flotará y encogerá el reproductor, pegándolo al lado de la ventana en lugar de perderlo de la vista..
Esto permite a los usuarios vigilar el video mientras miran a través del otro contenido al mismo tiempo. En este tutorial, te mostraré cómo recrear la misma experiencia, así que sin más dilación, comencemos!
Ejemplos
Solo para que todos estemos en la misma página, aquí hay un par de ejemplos en la naturaleza:
Entertainment Weekly envía sus videos a la parte inferior derecha de la ventana gráfica.Los videos de la CNN flotan hacia la derecha.
Añadiendo video de YouTube
Para empezar, vamos a construir el marcado de la página junto con un video de YouTube. Crucialmente, incrustamos el video con el enablejsapi = 1 parámetro agregado; este parámetro nos permitirá interactuar con el video a través de la API Iframe de Youtube.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!
En la parte inferior de la página, como puede ver, también hemos agregado tres archivos JavaScript; a saber, jQuery, el script que nos proporciona la API Iframe de Youtube y el main.js donde vamos a escribir nuestro JavaScript personalizado.
Estilo
Puede diseñar la página como desee, pero los estilos que nos interesan específicamente aquí son los que están vinculados al video de YouTube. Primero, agregamos los estilos para hacer que el video de YouTube sea receptivo. Estas reglas en última instancia también permitirán el contenedor., .contenido-media - video, para conservar su relación de aspecto cuando se reposiciona el video de YouTube.
.content-media - video background-color: #ddd; bloqueo de pantalla; posición: relativa; Relleno: 0 0 56.25% 0; .content-media - video iframe posición: absoluta; abajo: 0; izquierda: 0; ancho: 100%; altura: 100%;
Estilos de reproductor de video flotante
Nuestras próximas reglas de CSS definen cómo debe flotar el video de YouTube. Estamos usando un selector .es pegajoso-, que agregaremos dinámicamente al reproductor con JavaScript, para hacer flotar el video en la página. Esto también reducirá el tamaño del video, lo posicionará a la izquierda y lo ajustará para un par de tamaños de vista..
Nota: debe ajustar estas propiedades (el tamaño y la posición) de acuerdo con su audiencia y la naturaleza de su sitio web. Si, por ejemplo, el contenido de su sitio web está escrito de derecha a izquierda, eso podría afectar la mejor ubicación para colocar su reproductor de video..
Ahora, cuando cargamos esta página, podemos ver el video de YouTube que se muestra junto con algunos de nuestros contenidos arbitrarios..
Escribiendo JavaScript
Hemos llegado a la parte emocionante de este tutorial; el JavaScript! Nuestro main.js El contenido del archivo en este punto es el siguiente:
jQuery (function ($) // Escriba el código aquí.);
Este fragmento de arriba equivale a la $ (documento) .ready (), lo que nos permite ejecutar JavaScript una vez que todos los elementos de la página hayan sido analizados y estén disponibles.
A continuación, definimos una serie de variables. He agregado comentarios en línea al lado de cada variable, para explicar lo que está pasando.
var $ window = $ (ventana); // 1. Objeto de ventana. var $ FeaturedMedia = $ ("# Featured-Media"); // 1. El contenedor de video. var $ featureVideo = $ ("# Featured-video"); // 2. El video de Youtube. jugador var // 3. Objeto del reproductor de Youtube. var top = $ FeaturedMedia.offset (). top; // 4. La posición del video desde la parte superior del documento; var offset = Math.floor (top + ($ FeaturedMedia.outerHeight () / 2)); // 5. compensar.
API Iframe de Youtube
Como se mencionó anteriormente, hemos agregado el archivo JavaScript que brinda acceso a la API Iframe de YouTube. Esta API, una vez cargada, activará una función llamada onYouTubeIframeAPIReady. Esta función está disponible a nivel global. Y como nuestro guión está anidado bajo el jQuery (function ($) );, Tenemos que alcanzar esta función en el ventana objeto, como sigue:
window.onYouTubeIframeAPIReady = function () player = new YT.Player ("Featured-video", events: "onStateChange": onPlayerStateChange); ;
Como puede ver dentro de la función, hemos seleccionado el atributo ID del iframe así como pasar una función llamada onPlayerStateChange. Esta función se activará cuando el reproductor de video de YouTube se reproduzca, pause o finalice.
los onPlayerStateChange Pasa un objeto de evento que nos proporciona datos utilizables. En este caso, por ejemplo, utilizaremos el Evento. .datos objeto para obtener el estado del video.
El estado del video, como se puede ver a continuación, se representa con un número; 1 es cuando el video se esta reproduciendo, 2 es cuando el video está en pausa, y 3 Es cuando el video termina. Agregaremos y eliminaremos un nombre de clase en consecuencia cuando se cambie el estado.
/ ** * Ejecutar cuando se cambia el estado del video de YouTube (reproducir, pausar, etc.). * * @param Object event El evento de objeto de Youtube. * @return Void * / function onPlayerStateChange (event) var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; if (isPlay) $ featureVideo.removeClass ("is-paused"); $ FeaturedVideo.toggleClass ("is-playing"); if (isPause) $ FeatureVideo.removeClass ("is-playing"); $ FeaturedVideo.toggleClass ("is-paused"); if (isEnd) $ FeatureVideo.removeClass ("is-playing", "is-paused");
Flotando y pegando el video
Lo que sigue es el código para flotar y pegar nuestro reproductor de video. Vale la pena señalar que solo debemos hacer flotar el video cuando el video se está reproduciendo. Por lo tanto, primero verificamos el iframe para ver si tiene la está jugando clase antes de agregar el es pegajoso clase:
Prueba lo que has hecho y deberías ver las cosas funcionando.!
Demo final
Conclusión
Hemos terminado Este tutorial está dirigido a comenzar, y le brinda los fundamentos de cómo hacer flotar un video de manera similar a los sitios web de medios que haya visto. Utilizamos jQuery para hacer que el código sea más sencillo, más corto y más fácil de entender para los lectores en general..
Sin embargo, en un proyecto real, probablemente tendrá que modificar los detalles aquí y allá dependiendo de la complejidad del proyecto. Por ejemplo, es posible que desee ejecutar la función de desplazamiento en una función de limitación para reducir las llamadas de función. Es posible que también deba ajustar la posición y el tamaño del video según la distribución del sitio en un dispositivo móvil, etc..
Sin embargo, echa un vistazo a la demostración, reproduce el video y comienza a desplazarte!
Share
Entertainment Weekly envía sus videos a la parte inferior derecha de la ventana gráfica.
Los videos de la CNN flotan hacia la derecha.
Accentsconagua
Demo final