En nuestro post anterior hemos cubierto cómo crear un reproductor de audio Web , así como la forma de personalizar el aspecto del reproductor. Esta vez vamos a hacerlo con video. Sí, vamos a crear un reproductor de vídeo web. El reproductor de vídeo embebido se utiliza el HTML5
<video> elemento, por lo que técnicamente cualquier navegador compatible con HTML5 puede reproducir este vídeo. 
En caso de que el navegador no lo soporta, un reproductor flash integrada será entregado como reserva, por lo que es necesario instalar el plugin de Flash antes de que son capaces de reproducir el vídeo. Esta captura de pantalla muestra el resultado final de nuestro reproductor de vídeo.
Preparación
Como de costumbre, antes de ponerse a trabajar con el código, tenemos que preparar algunas cosas primero, especialmente el vídeo. En este tutorial, vamos a utilizar este video de TED Talk por Kelli Anderson en Youtube. Para descargarlo, puedes utilizar esta herramienta web, llamada KeepVid.com .Para compatibilidad con los navegadores más amplio, tenemos que proporcionar dos formatos de vídeo, MP4 y OGV. Por defecto, al descargar vídeos de Youtube con KeepVid.com lo más probable es obtener el formato MP4. Puede utilizar Miro Video Convertidor para convertir el vídeo a formato MP4 OGV, está disponible de forma gratuita para Windows y OS X máquina.
Por otra parte, también es necesario un archivo de imagen para la cubierta de video. Para crear esta portada se puede reproducir el video con VLC y luego ir> Video Snapshot para tomar una instantánea del vídeo. En cuanto al icono de interfaz de usuario, que vamos a utilizar FontAwesome . Por último, también es necesario JPlayer , jQuery para ejecutar el video, así como un nuevo archivo CSS para almacenar los estilos de aspecto de vídeo.
Después de recoger todo esto, ellos ponen en sus carpetas correspondientes, como se muestra a continuación:
Estructura HTML
Ahora, cree un nuevo documento HTML y vincular el jQuery, JPlayer bibliotecas, así como el archivo CSS en el<head> sección, así. <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"> </ script> <script type="text/javascript" src="js/jquery.jplayer.min.js"> </ script>En cuanto a la estructura HTML de nuestro reproductor de vídeo, en realidad es similar a la forma de crear un reproductor de audio desde el tutorial anterior.
Sólo que esta vez tenemos un botón para encender el vídeo en formato de pantalla completa y un botón de reproducción en el centro del vídeo. Coloque este código de abajo en el interior del
<body> sección. <div id="jp_container_1" class="jp-video">
<div class="jp-title">
<h1> Kelli Anderson - Wonder perturbador para un Cambio </ h1>
</ Div>
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"> </ div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1"> </ a>
</ Div>
<div class="jp-interface">
<div class="jp-controls-holder">
<ul class="jp-controls">
<li> <a href="javascript:;" class="jp-play" tabindex="1"> </ a> </ li>
<li> <a href="javascript:;" class="jp-pause" tabindex="1"> </ a> </ li>
<li> <a href="javascript:;" class="jp-mute" tabindex="1" title="mute"> </ a> </ li>
<li> <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"> </ a> </ li>
</ Ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"> </ div>
</ Div>
<ul class="jp-toggles">
<li> <a href="javascript:;" class="jp-full-screen" tabindex="1" title="Full screen"> </ a> </ li>
<li> <a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen"> </ a> </ li>
</ Div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"> </ div>
</ Div>
</ Div>
<div class="jp-current-time"> </ div>
</ Div>
</ Div>
<div class="jp-no-solution">
<span> actualización obligatorio </ span>
Para reproducir los medios de comunicación que tendrá que actualice su navegador a una versión más reciente o actualizar su <a href="http://get.adobe.com/flashplayer/" target="_blank"> plugin de Flash </ a>.
</ Div>
</ Div>
</ Div>
Activar el video
Activar el vídeo es también similar a nuestro reproductor de audio anterior. La única diferencia es que esta vez, tenemos que vincular el cartel de vídeo y los formatos suministrados son ahora m4v y ogv. Ponga todos estos scripts justo debajo del jquery y enlaces JPlayer hemos añadido antes.<script>
$ (Document). Ready (function () {
$ ("# Jquery_jplayer_1"). JPlayer ({
listo: function () {
$ (This). JPlayer ("setMedia", {
m4v: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp4"
ogv: "vid / TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogv"
cartel: "vid / TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.png"
});
},
swfPath: "/ js",
suministro: "m4v, ogv"
});
});
</ Script>
En esta etapa, nuestro reproductor de vídeo todavía se ve claramente como se muestra en la siguiente captura de pantalla. 
Añadir estilos
Después de agregar los script, ahora debería ser capaz de ejecutar el video. Sin embargo, el jugador todavía parece impresentable, así que vamos a hacerlo mejor mediante la adición de estilos.Abre el
style.css archivo que hemos creado anteriormente en este post. Vamos a empezar por la adición de @ font-face regla y eliminar los subrayados de todos los enlaces.
@ Font-face {
font-family: "FontAwesome";
src: url ('fonts / fontawesome webfont.eot-');
src: url ('fonts / fontawesome webfont.eot-# IEFix?') formato ('eot'),
url ('fonts / fontawesome webfont.woff-') Formato ('WOFF'),
url ('fonts / fontawesome webfont.ttf-') Formato ('truetype'),
url ('fonts / fontawesome-webfont.svg FontAwesome #') formato ('svg');
font-weight: normal;
font-style: normal;
}
un {
text-decoration: none;
}
Vídeo Ancho
A continuación, se especifica el ancho del contenedor de vídeo y colocarlo en el centro de la ventana del navegador, como tal.. Jp-video {
margin: 0 auto;
position: relative;
font-family: Arial, sans-serif;
}
. Jp-video-270P {
ancho: 480px;
}
Título del video
Pasamos el color del título a gris oscuro, especifique el tamaño de fuente y alinearlo con el centro.. Jp-título h1 {
font-size: 1em;
text-align: center;
color: # 555;
}
Botón de reproducción
Luego, el estilo del botón de reproducción. Ponemos este botón en la parte superior sobre el vídeo y para mostrar el icono de reproducción, asignamosFontAwesome familia de fuentes a la misma. . Jp-video-juego {
font-family: "FontAwesome";
position: absolute;
superior: 45%;
izquierda: 46%;
}
. Jp-video-juego a {
font-size: 2em;
color: rgba (255,255,255, 0,7);
display: inline-block;
Ancho: 50px;
altura: 50px;
line-height: 55 px;
text-align: center;
background-color: rgba (0,0,0, 0,8);
border-radius: 5px;
}
Vídeo Interfaz de usuario
La interfaz de usuario para nuestro reproductor de vídeo será similar. Contará con un degradado con el esquema de color naranja, mientras que los iconos de control del vídeo, como la reproducción, pausa y volumen estará en blanco.. Jp-interface {
width: 100%;
inferior: 0;
position: relative;
background: # f34927;
background:-moz-linear-gradient (top, # f34927 0%, # dd3311 100%);
background:-webkit-gradient (linear, superior izquierda, inferior izquierda, color-stop (0%, # f34927), color-stop (100%, # dd3311));
background:-webkit-lineal de gradiente (arriba, # f34927 0%, # dd3311 100%);
fondo:-o-lineal de gradiente (arriba, # f34927 0%, # dd3311 100%);
fondo:-ms-lineal de gradiente (arriba, # f34927 0%, # dd3311 100%);
Antecedentes: lineal-gradiente (a abajo, # f34927 0%, # dd3311 100%);
filtro: PROGID: DXImageTransform.Microsoft.gradient (startColorstr = '# f34927', endColorstr = '# dd3311', GradientType = 0);
overflow: hidden;
-Webkit-box-shadow: 1px inserción 0px 0px 0px rgba (255, 255, 255, 0,1);
box-shadow: 1px inserción 0px 0px 0px rgba (255, 255, 255, 0,1);
}
. Jp-interface a {
color: # fff;
text-shadow: 1px 1px rgba 0 (0,0,0,0.3);
}
. Jp-controls,. Jp-alterna {
padding: 0;
margin: 0;
font-family: "FontAwesome"
}
. Jp-alterna {
position: absolute;
top: 14px;
derecha: 14px;
}
. Jp-li controles,. Jp-alterna li {
display: inline;
}
. Jp-play. Jp-pausa {
anchura: 55 px;
altura: 40px;
display: inline-block;
text-align: center;
line-height: 43px;
}
. Jp-mudo. Jp-unmute {
position: absolute;
derecha: 85px;
top: 0;
Ancho: 20px;
altura: 40px;
display: inline-block;
line-height: 43px;
}
. Jp-progress {
background-color: # 992E18;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: absolute;
izquierda: 55 px;
top: 14px;
anchura: 55%;
-Webkit-box-shadow: 1px 1px rgba 0 0 (0,0,0,0.2) inserción;
box-shadow: 1px 1px rgba 0 0 (0,0,0,0.2) inserción;
}
. Jp-play-bar {
altura: 12px;
background-color: # fff;
border-radius: 20px 20px 20px 20px;
}
. Jp-volumen-bar {
position: absolute;
derecha: 40px;
top: 16px;
Ancho: 45px;
altura: 8px;
border-radius: 20px 20px 20px 20px;
-Webkit-box-shadow: 1px 1px rgba 0 0 (0,0,0,0.1) inserción;
box-shadow: 1px 1px rgba 0 0 (0,0,0,0.1) inserción;
background-color: # 992E18;
overflow: hidden;
}
. Jp-volumen-bar-value {
background-color: # fff;
altura: 8px;
border-radius: 20px 20px 20px 20px;
}
. Jp-current-time {
color: # FFF;
font-size: 12px;
line-height: 14px;
position: absolute;
derecha: 115px;
top: 13px;
text-shadow: 1px 1px rgba 0 (0,0,0,0.3);
}
En este punto, nuestro reproductor de vídeo comenzar una apariencia agradable, como se muestra en la siguiente captura de pantalla. 
Fullscreen Video
Somos capaces de cambiar el vídeo a pantalla completa. Por eso, también tenemos que agregar estilos de centrarse específicamente cuando el vídeo está en modo de pantalla completa, incluido el ajuste de la anchura y la altura del botón de reproducción, la anchura de la barra de progreso y el video debe estar encima de los demás, especificando laz-index mayor. . Jp-video-full {
/ * Reglas para IE6 (pantalla completa) * /
ancho: 480px;
altura: 270px;
/ * Reglas para IE7 (pantalla completa) - De lo contrario el respectivo contenedor provoca otros elementos de página que no son: posición estática (por defecto) para aparecer en el video / gui. * /
posición: estática importante;
position: relative;
}
/ * La regla z-índice se define de esta manera para que las palomitas plugins que añaden superposiciones en las área de vídeo. EG. Subtítulos. * /
. Jp-video-full div div {
z-index: 1000;
}
. Jp-video-full. Jp-JPlayer {
top: 0;
left: 0;
posición: fijo importante;
position: relative; / * Reglas para IE6 (pantalla completa) * /
overflow: hidden;
}
. Jp-video-full. Jp-interface {
posición: absoluta importancia;
position: relative; / * Reglas para IE6 (pantalla completa) * /
inferior: 0;
left: 0;
}
. Jp-video-full. Jp-gui {
posición: fijo importante;
posición: static; / * Reglas para IE6 (pantalla completa) * /
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001; / * 1 capa por encima de los demás. * /
}
. Jp-video-full. Jp-video-juego a {
font-size: 3em;
altura: 80px;
Ancho: 80px;
line-height: 95px;
}
. Jp-video-full. Jp-progress {
anchura: 83%;
}
Y así es como nuestro reproductor de vídeo se ve como en el modo de pantalla completa. 
Añadir Sombra
Esto es opcional, pero me gustaría añadir sombra para hacer que el reproductor de vídeo se ven más bonitas y más prominente.. Jp-video-270P. Jp-tipo-single {
-Webkit-box-shadow: 0px 0px 0px 5px rgba (0, 0, 0, 0,5);
-Moz-box-shadow: 0px 0px 0px 5px rgba (0, 0, 0, 0,5);
box-shadow: 0px 0px 0px 5px rgba (0, 0, 0, 0,5);
}
Y, eso es todos los códigos que necesitamos, que ahora son capaces de ver el vídeo y descargar el archivo de origen de los siguientes enlaces. Puestos relacionados con:
No hay comentarios:
Publicar un comentario