Hace algún tiempo mencioné la etiqueta de video, especialmente implementada en html5. sin embargo, desafortunadamente, el uso de la etiqueta causará más inconvenientes que beneficios. por lo tanto, te diré cómo puedes hacerlo completamente con un formato de video.
para un proyecto necesitaba encontrar la posibilidad de desatornillar videos en el sitio. No fue posible hacer un jugador desde cero en un flash (para empezar, no tengo un entorno de desarrollo y no lo proporcioné), por lo que era necesario, de hecho, encontrar un candidato adecuado en la cara de un flash player. no se requería nada particularmente complicado, ya que gracias a los usuarios de YouTube es muy fácil navegar en este tipo de jugadores;)
2 candidatos ubicados en los sitios flv-mp3.com (un proyecto de uppodʻa) y reproductor de flujo . después de hacer un pequeño golpe cada uno, el primero fue rápidamente abandonado en favor de la combinación que proporcionaba el api actual. como se ha demostrado con el tiempo, la tripa interna no me decepcionó (aunque algunas personas lograron entrar en vtyuhat flv-mp3.com).
Como saben, la primera impresión es bastante engañosa y, a veces, se da preferencia al dispositivo menos saturado (especialmente si utiliza el idioma nativo). Es este enfoque el que se solicitó en flv-mp3: el servicio brinda la oportunidad de "reunir" a un jugador con características específicas (en forma indique el archivo que se está reproduciendo, el protector de pantalla, las dimensiones y algunos otros parámetros) y obtenga el código de salida para insertar el archivo. Sí, la opción puede parecer muy conveniente, especialmente para las personas que consideran que html es una bruja fuerte, por no mencionar a js y así sucesivamente.
solo es improbable que la adición periódica de videos al sitio contribuya al entusiasmo de "construir" constantemente al jugador por sí mismo. alternativamente, puede explorar todas las configuraciones y automatizar a través del idioma del servidor. pero este principio solo se puede llamar distorsionado (es mucho más fácil cargar videos en YouTube y tener el código listo para descargar).
Aquí llegamos a la misma cosa que ya se puede llamar plenamente una hechicera. Quieres comprender javascript magic? Mostraré que no es nada difícil (incluso más fácil que usar un constructor). y ayuda con este flowplayer. puedes elegir una version desde aqui , pero la primera versión que se distribuye bajo GPL3 es bastante adecuada para su sitio.
El reproductor admite la reproducción del siguiente contenido: flv, mp4, m4v (para imágenes - jpg, gif, png). El video es compatible desde la versión 9, por lo que no debería haber problemas de soporte.
Descargue el archivo con el reproductor y desempaquételo. Deberá cargar 3 archivos en el sitio: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf y example / flowplayer-NumVer.min.js , donde NumVer es solo el número de versión, y puede ser, por ejemplo, 3.2.7 .
El primer archivo contiene el panel de control, el segundo, directamente el jugador y el tercero es el enlace que proporciona la API. Los primeros 2 archivos (* .swf) deben estar en la misma carpeta. ahora es el momento para el código más simple. puede ser:
<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>
El elemento div con la ID del jugador es el contenedor en el que se desenroscará el video. En la segunda línea está la conexión del archivo javascript. Directamente para la salida es responsable de una función flowplayer () , que pasa 3 parámetros:
- el identificador del elemento en el que se debe reproducir el video;
- la ruta al jugador (es decir, al jugador, y no a los controles que se cargarán automáticamente);
- Algunos parámetros adicionales.
Por cierto, además del identificador, puede pasar directamente una referencia a un objeto o selector.
El código anterior no muestra nada, pero da una idea de lo fácil que es conectar un reproductor de flujo a una página. Para generar video, debe crear un tercer parámetro, y esto, por cierto, también es bastante simple.
para simplificar: el tercer parámetro (config) es una matriz asociativa en la que se pueden describir los siguientes elementos:
- clip : con esta tecla puede "hacer" la configuración global, por ejemplo, si desea iniciar automáticamente el almacenamiento en búfer (búfer automático) o la reproducción (reproducción automática), cómo escalar el contenido (la escala con el valor de ajuste mantendrá la relación de aspecto original, y para el video normal se usará, tal vez solo eso). También puede especificar el archivo que se está reproduciendo (url) e incluso suspender eventos (funciones que se llamarán, por ejemplo, cuando la película comience a reproducirse);
- La lista de reproducción es una matriz regular (lista). Cada elemento puede ser una cadena (en este caso, la cadena es la dirección del clip que se está reproduciendo) o una matriz asociativa. en el segundo caso, el conjunto de datos se puede ver como un conjunto de datos similar a la clave de clip del elemento anterior, es decir, puede especificar el uso del almacenamiento en búfer, iniciar la reproducción, etc.
- complementos - sirve para ampliar las características estándar. Una de las características es la capacidad de rogar la interfaz en el momento.
Ahora un pequeño ejemplo que incluye una demostración de las posibilidades:
<div id = "player" style = "width: 520px; height: 330px;"> </ div> <tipo de script = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, playlist: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // para manipular los controles de los complementos: {controles: {url:' flowplayer.controls-3.2.16.swf ', lista de reproducción: falsa , // elimina los botones de rebobinado. stop: true, // agrega el botón de parada: arrastre: true // false deshabilita el desplazamiento del video}}})); </ script>
El código presentado establece lo siguiente como configuración global: deshabilitar la reproducción de inicio automático, deshabilitar el búfer automático, escalar el video para que se ajuste a la ventana. Como archivo reproducible, se utilizan una imagen y un video, y los ajustes de la imagen se anulan (ya que debería cargarse automáticamente). Cuando hace clic en la imagen (o en el botón de reproducción), se muestra el video. Como puedes ver, todo es muy simple. Si desea agregar otro videoclip, simplemente agregue un nuevo elemento a la lista de reproducción, separados por una coma. si se requiere la reproducción automática de la lista de reproducción, en el clip de matriz asociativa se establece, el valor de autoPlay se establece en verdadero.
La documentación que contiene las funciones de api se encuentra aqui . Si alguien no entiende inglés, no importa, todo está muy claro. y después de analizar el código anterior, es bastante posible comprender lo que hay en los muelles. Recomiendo encarecidamente echar un vistazo, seguro que habrá una "configuración" que estará en demanda.
ejemplo puede mira aqui . No te olvides de mirar el código fuente (Ctrl + U)
Editor
fuera de línea 1 semana
x64 (aka andi)
Comentarios: 2842 Publicaciones: 395 Inscripción: 02-04-2009
Quieres comprender javascript magic?