Este intercambio es un reproductor de video personalizado basado en la etiqueta HTML5. Entre ellos, se implementan las funciones como jugar pausa, arrastre de progreso, control de volumen y pantalla completa.
AvanceHaga clic en mí para ver el almacén del código fuente.
Idea centralCreo que algunos zapatos infantiles que no han estado expuestos a hacer jugadores personalizados se quedarán aquí para las etiquetas.
<Video Controls = Controls AutoPlay = AutoPlay> <Source src = Movie.ogg type = video/ogg/> </video>
La propiedad Controls está configurada para mostrar la barra de control propia de un navegador en la interfaz. Si no hay demanda de IU, su controlador construido ya puede satisfacer la mayoría de las necesidades. Por supuesto, si es así, no verá esto compartiendo =. =
Ocultar la barra de control y simularLuego, la clave para el jugador que implementa una función personalizada es que no usamos el controlador nativo para ocultarlo. Estados Unidos, así como los datos de reproducción de videos de simulación y reproducción de video correspondientes del comportamiento operativo del usuario.
El uso de varias funciones y atributos centralesMyVid = document.getElementById (Video1); .duration // Devuelve la longitud total del video // Volumen de video de simulación myvid.volume // volumen // Después de obtener el video, se determina cuando se cambia de carga a reproducir myvid.readystate // 0 = have_nothing -no Acerca de audio/si el video está listo // 1 = have_metadata -OUNSE AUDIO/VIDEO en metadatos // 2 = have_current_data -data sobre la ubicación de reproducción actual está disponible, pero no hay suficientes datos para reproducir el siguiente cuadro/milisegund // 3 = have_future_data -La corriente y al menos el siguiente cuadro de los datos está disponible // 4 = have_enough_data -Asvailable Data es suficiente para comenzar a jugar
En todos los puntos clave en la implementación, la más tediosa es la simulación de la barra de progreso. Entre ellos, los atributos de tiempo y duración actuales en la etiqueta de video se utilizan para calcular la posición de la barra de progreso en relación con la longitud total a través del tiempo de reproducción actual y el tiempo de reproducción total. Al mismo tiempo, la longitud del usuario en la configuración final del usuario también se puede usar para revertir la posición del video en este momento.
Arrastre la idea del código // Core Code Sample var dragdis = 0Var ProcesWidth = xxx // Longitud total de la barra de arrastre ('cuerpo'). Renderizado en la misma ubicación VideoSource.Pause ()}). (izquierda <0) {izquierda = 0} dragTarget.css ({izquierda: izquierda}) dragprocess.css ({ancho: izquierda}).). Processwidth * Duración // Calcule la posición de reproducción correcta del video después de arrastrarEl control del volumen es básicamente el mismo que el comportamiento anterior.
Controle la animación de carga antes de reproducirse consultando el estado de transmisión de video function ifstate () {var state = videSource.readyState if (state === 4) {// 状态为 4 即可播放 VideOplayer ()} else {$ ('. Play-Sym-Wrapper'). ('Body'). fstate, 10)}} setTimeOut (ifstate, 10)La parte de control central ha sido terminado. Las funciones básicas de todo el reproductor de video se realizan.
Lo anterior es todo el contenido de este artículo.