revisión
Así no se han examinado directamente eh JS1, abiertos por escrito bvd.js
Play video
botón de reproducción oculta
-
Vídeo comienza a reproducirse
cuando se haga clic en el botón de reproducción, un botón de reproducción se ocultará, reproducir el vídeo, esto no es difícil, en la JS1 que hemos logrado. Pero tenemos un cambio de pensamiento, toque para añadir un vídeo de eventos de clic, reproductores de vídeo, y luego jugar evento se activa, de modo que el botón de reproducción ocultapro.initEvent = function(){ var that = this; //给播放按钮图片添加事件 this.vimg.addEventListener('tap',function(){ that.video.play(); }) //视频点击暂停或播放事件 this.video.addEventListener('tap',function(){ if(this.paused || this.ended) { //暂停时点击就播放 if(this.ended) {//如果播放完毕，就重头开始播放 this.currentTime = 0; } this.play(); } else { //播放时点击就暂停 this.pause(); } }) //视频播放事件 this.video.addEventListener('play',function(){ that.vimg.style.display = 'none'; }) //获取到元数据 this.video.addEventListener('loadedmetadata',function(){ that.vC.querySelector('.duration').innerHTML = stom(this.duration); }); } -
Escondido debajo de la barra de control poco a poco
escondido no es la dificultad, es importante que oculta gradualmente, de modo que aquí tenemos varias soluciones:temporizador
cuadros de animación CSS3
Aquí tenemos dos tipos en combinación
En primer lugar, vamos a definir un buen conjunto de animación
@keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}
@-webkit-keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}
.vhidden {
animation: vhide 3.5s ease-in;
-webkit-animation: vhide 3.5s ease-in;
}Su función es la transparencia = 1> 0, la facilidad en efecto es excesivamente rápida de lento a 3,5 segundos. animaciones CSS no entienden que se puede pedir de tu madre oh
y luego iniciar la reproducción del vídeo cuando el evento a la barra de control añadió clase de estilo vhidden
//视频播放事件
this.video.addEventListener('play',function(){
that.vC.classList.add('vhidden');
})resultados de las pruebas y, por supuesto, dentro de 3.5s barra de control poco a poco clara, el problema es después de 3,5 s, de vuelta a la transparencia 1, y aquí explico, porque los cuadros de animación por defecto es de rebote, podemos añadir estilo
.vhidden {
animation: vhide 3.5s ease-in;
-webkit-animation: vhide 3.5s ease-in;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
}CSS3 atributo-fill-modo de animación se utiliza para definir elementos como después de la animación.
El valor por defecto de la animación-fill-mode es ninguna, es decir, sin ningún cambio después del final de la animación, si después del final de los delanteros-fill-mode animación en los elementos de estilo de animación se convertirá en la animación último fotograma clave especificada estilo.
Después de la adición de este estilo, y por supuesto después de 3.5s, la animación no se recuperará, pero aquí a la vista, pero la barra de control transparente no se ha ido, y si tenemos que escribir a continuación, haga clic en la barra de control del tiempo, por lo que en el control haga clic en la posición de la barra, o va a desencadenar eventos, así, podemos escribir para un setTimeout para permitir que la barra de control para ocultar después de 3.5s, esto nos puede elegir su propio
//视频播放事件
this.video.addEventListener('play',function(){
that.vimg.style.display = 'none';
that.vC.classList.add('vhidden');
that.vCt = setTimeout(function(){
that.vC.style.visibility = 'hidden';
},3400);
})¿Por qué proceso de animación es 3.5s, pero la implementación es js después de 3.4s, no sólo aquí para escribir la animación-fill-mode: reenvía el caso de estar asegurados
jugando en
Hey, puede reproducir vídeo! Así que ahora que pensamos en juego qué cosas hay que hacer?
1. Control de la barra de progreso barra de crecer lentamente
Tenemos que añadir un video timeupdate de audio de eventos y la posición de reproducción de vídeo se cambia
Vamos a obtener los metadatos de vídeo en su caso, la duración del vídeo para ganar
//获取到元数据
this.video.addEventListener('loadedmetadata',function(){
that.vDuration = this.duration;
that.vC.querySelector('.duration').innerHTML = stom(that.vDuration);
});A continuación, calcular la relación, establecer la barra de progreso del evento de actualización de progreso de reproducción de vídeo de ancho
//视频播放中事件
this.video.addEventListener('timeupdate', function() {
var currentPos = this.currentTime;//获取当前播放的位置
//更新进度条
var percentage = 100 * currentPos / that.vDuration;
//设置宽度
that.vC.querySelector('.timeBar').style.width = percentage + '%';
});
Podemos ver la barra de progreso de junio cada vez inflada.
2. El tiempo de reproducción actual
Al mismo tiempo, también mostramos el tiempo que se está reproduciendo timeupdate conjunto de eventos
//视频播放中事件
this.video.addEventListener('timeupdate', function() {
var currentPos = this.currentTime;//获取当前播放的位置
//更新进度条
var percentage = 100 * currentPos / that.vDuration;
that.vC.querySelector('.timeBar').style.width = percentage + '%';
//更新当前播放时间
that.vC.querySelector('.current').innerHTML = stom(currentPos);
});
Pausar o detener
Cuando se hace clic en el video, si es para hacer una pausa, y luego empezar a jugar, y jugar el evento de disparo, mientras que en la reproducción de vídeo, haga clic en el vídeo se detendrá, y el evento de pausa gatillo.
0. Los marcos de tiempo
La la la, pausa de reproducción, timeupdate eventos, naturalmente, no los activa, por lo que la barra de progreso y el tiempo de reproducción actual no se convertirán en amigos.
1. botón Reproducir
En la pausa cuando el botón Mostrar para Ven
//暂停or停止
this.video.addEventListener('pause',function(){
that.vimg.style.display = 'block';
});2 por debajo de la visualización de la barra de control
Visualización de la barra de control, la eliminación directa de la clase de estilo vhidden Jiuhaola
//暂停or停止
this.video.addEventListener('pause',function(){
that.vimg.style.display = 'block';
that.vC.classList.remove('vhidden');
that.vC.style.visibility = 'visible';
});Escribir parece ser cierto, pero si se oculta la barra de control antes de que el tiempo para escribir un setTimeout, a continuación, esta vez debe limpiar oh.
//暂停or停止
this.video.addEventListener('pause',function(){
that.vimg.style.display = 'block';
that.vC.classList.remove('vhidden');
that.vC.style.visibility = 'visible';
that.vCt && clearTimeout(that.vCt);
});Avance rápido y rebobinado
Diao Diao ruido de cómo un pequeño reproductor de vídeo puede ser menos de un retiro en ella resiliente?
Ven, vamos a añadir el vídeo del evento corredera derecha deslizar hacia la izquierda
//视频手势右滑动事件
this.video.addEventListener('swiperight',function(e){
this.currentTime += 5;
});
//视频手势左滑动事件
this.video.addEventListener('swipeleft',function(e){
this.currentTime -= 5;
});Depuración puede progresar directamente en el ordenador se convierte en 0, al principio también me pregunto lo que, más tarde se encontró en vista web en el teléfono parece ser factible.
Acerca de la barra de progreso y arrastre para cambiar el curso de vídeo no tengo la intención de escribir, porque yo no escribo.
reproducción a pantalla completa
Tal vez están más preocupados por este derecho:
ios final: la eliminación de la propiedad etiqueta video webkit-playsinline puede ser, a causa de ios h5 apoyar la etiqueta video es bastante buena
//调用原生方式 全屏播放
pro.nativeMax = function(){
if(!window.plus){
//非html5+环境
return;
}
if($.os.ios){
console.log('ios')
this.video.removeAttribute('webkit-playsinline');
}else if($.os.android){
console.log('android');
var url = this.video.querySelector('source').src;
var Intent = plus.android.importClass("android.content.Intent");
var Uri = plus.android.importClass("android.net.Uri");
var main = plus.android.runtimeMainActivity();
var intent = new Intent(Intent.ACTION_VIEW);
var uri = Uri.parse(url);
intent.setDataAndType(uri, "video/*");
main.startActivity(intent);
}
}Haga clic para añadir eventos a pantalla completa en initEvent
this.vC.querySelector('.fill').addEventListener('tap',function(){
that.nativeMax();
});Haciendo un poco de mal gusto ah, no se puede apuntar a un común?
La pregunta que realmente quieren una noche y decidió traer un poco seco.
Dar a los estados la opción predeterminada para el mini reproductor
var bvd = function(dom) {
var that = this;
$.ready(function() {
//获取视频元素
that.video = document.querySelector(dom || 'video');
//获取视频父元素
that.vRoom = that.video.parentNode;
//元素初始化
that.initEm();
//事件初始化
that.initEvent();
//记录信息
that.initInfo();
//当前播放模式 false 为 mini播放
that.isMax = false;
})
}
//记录信息
pro.initInfo = function() {
var that = this;
//在onload状态下，offsetHeight才会获取到正确的值
window.onload = function(){
that.miniInfo = {//mini状态时的样式
width: that.video.offsetWidth + 'px',
height: that.video.offsetHeight + 'px',
position: that.vRoom.style.position,
transform: 'translate(0,0) rotate(0deg)'
}
var info = [
document.documentElement.clientWidth || document.body.clientWidth,
document.documentElement.clientHeight || document.body.clientHeigth
],
w = info[0],
h = info[1],
cha = Math.abs(h - w) / 2;
that.maxInfo = {//max状态时的样式
width: h + 'px',
height: w + 'px',
position: 'fixed',
transform: 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)'
}
}
}
//全屏 mini 两种模式切换
pro.switch = function() {
var vR = this.vRoom;
//获取需要转换的样式信息
var info = this.isMax ? this.miniInfo : this.maxInfo;
for(var i in info) {
vR.style[i] = info[i];
}
this.isMax = !this.isMax;
}
//全屏按钮
this.vC.querySelector('.fill').addEventListener('tap', function() {
//that.nativeMax();
that.switch();
});El tipo de tracción, tirar de un vistazo
Se ve y se siente muy bien también, utilizando el desplazamiento y rotación CSS3, por lo que el vídeo en pantalla completa en la parte frontal de la pantalla, pero el problema ha surgido
Botón de reproducción y una barra de control en pantalla completa parece esconder el hecho de que las etiquetas de vídeo cubren la parte superior del elemento padre, lo que tenemos que hacer los ajustes correspondientes
css
.bad-video {
position: relative;
/*overflow: hidden;*/
background-color: #CCCCCC;
}JS
max entre el valor de ajuste de configuración zIndex
that.maxInfo = {//max状态时的样式
zIndex:99,
width: h + 'px',
height: w + 'px',
position: 'fixed',
transform: 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)'
}
Después de la plena horizontal, deslizando alrededor de los eventos no siguió el cambio de dirección
//视频手势右滑动事件
this.video.addEventListener('swiperight', function(e) {
console.log('right');
this.currentTime += 5;
});
//视频手势左滑动事件
this.video.addEventListener('swipeleft', function(e) {
console.log('left');
this.currentTime -= 5;
});
TM Esto es muy embarazoso, lo hago de pantalla completa, el teléfono en posición horizontal, también se redujo el avance rápido y rebobinado?
Esta vez cómo hacerlo, no lo hacen cuadrada
eventos gesto de deslizamiento
Le damos una lista de eventos de vídeo registrada
var events = {};
//增加 或者删除事件
pro.eve = function(ename, callback, isF) {
if(callback && typeof(callback) == 'function') {
isF && arguments.callee(ename);
events[ename] = callback;
this.video.addEventListener(ename, events[ename]);
console.log('添加事件：' + ename);
return;
}
var fun = events[ename] || function(){};
this.video.removeEventListener(ename, fun);
console.log('删除事件：' + ename);
return fun;
}Para el evento de vídeo para añadir un agente para borrar añadir un evento, ISF que es nuevo se elimina este mismo evento antes del evento, ya que la adición de un evento con una función anónima, que no se puede eliminar, por lo que creó un proxy puede añadir dinámicamente eventos registrados en el interior de eventos, fácil de operar
Después hacemos avances en la modificación de las funciones de reproducción y volumen actuales
//跳转视频进度 单位 秒
pro.setCurrentTime = function(t){
this.video.currentTime += t;
}
//设置音量大小 单位 百分比 如 0.1
pro.setVolume = function(v){
this.video.volume+= v;
}Añadir desliza hacia arriba y hacia abajo sobre el evento a través de un proxy para vídeo
//视频手势右滑动事件
this.eve('swiperight',function(){
that.setCurrentTime(5);
});
//视频手势左滑动事件
this.eve('swipeleft', function(e) {
that.setCurrentTime(-5);
});
//视频手势上滑动事件
this.eve('swipeup',function(){
that.setVolume(0.2);
});
//视频手势下滑动事件
this.eve('swipedown', function(e) {
that.setCurrentTime(-0.2);
});bien, las cuatro direcciones de los eventos de deslizamiento se han añadido más tarde, pero este es un evento cuando el modo de mini reproductor, en la reproducción a pantalla completa, los cuatro Direcciones no cambió con elementos de vídeo y la dirección del cambio, que deben pasar por debajo de los más la forma más estúpida para determinar si el evento para desencadenar una pantalla completa
//视频手势右滑动事件
this.eve('swiperight',function(){
if(that.isMax){
return that.setVolume(0.2);
}
that.setCurrentTime(5);
});
//视频手势左滑动事件
this.eve('swipeleft', function() {
if(that.isMax){
return that.setVolume(-0.2);
}
that.setCurrentTime(-5);
});
//视频手势上滑动事件
this.eve('swipeup',function(){
if(that.isMax){
return that.setCurrentTime(-5);
}
that.setVolume(0.2);
});
//视频手势下滑动事件
this.eve('swipedown', function() {
if(that.isMax){
return that.setCurrentTime(5);
}
that.setVolume(-0.2);
});Cómo, a pesar de que parece un poco estúpido, pero es muy práctico
5+ soluciones de cliente a pantalla completa
Aunque el cliente 5+, androide puede llamar a la forma nativa de jugar, pero todavía está lejos de ser satisfactoria, podemos mirar a una solución
Durante la inicialización, el tiempo de grabación de la mini patrón, pantalla completa, el vídeo modificando el ancho de la altura de la pantalla, la altura del video es un video ancho de modificar, reutilizar 5+ rotación de la pantalla, siempre en pantalla completa, ocultar la barra de estado
0) para eliminar evento de gesto determinar
因为现在是准备改变移动设备的方向，所以，手势方向会跟着设备方向改变
1) la eliminación de la rotación y el desplazamiento css3
//记录信息
pro.initInfo = function() {
var that = this;
//在onload状态下，offsetHeight才会获取到正确的值
window.onload = function() {
that.miniInfo = { //mini状态时的样式
zIndex: 1,
width: that.video.offsetWidth + 'px',
height: that.video.offsetHeight + 'px',
position: that.vRoom.style.position
}
that.maxInfo = { //max状态时的样式
zIndex: 99,
width: '100%',
height: that.sw + 'px',
position: 'fixed'
}
}
}
2) Ajuste la pantalla completa con 5+ y ocultar la barra de estado
//全屏 mini 两种模式切换
pro.switch = function() {
var vR = this.vRoom;
//获取需要转换的样式信息
var info = this.isMax ? this.miniInfo : this.maxInfo;
for(var i in info) {
vR.style[i] = info[i];
}
this.isMax = !this.isMax;
plus.navigator.setFullscreen(this.isMax);
if(this.isMax) {
//横屏
plus.screen.lockOrientation("landscape-primary");
} else {
//竖屏
plus.screen.lockOrientation("portrait-primary");
}
}3) modo de pantalla completa, extremo androide de la tecla de retorno, el disparador para salir de la pantalla completa
pro.initEvent = function() {
//.......省略其他代码
this.oback = $.back;
//监听安卓返回键
$.back = function() {
if(that.isMax) {
that.switch();
return;
}
that.oback();
}
}representaciones
5+ gravedad conmutador de detección de pantalla completa
Hey, ¿cómo puede una pequeña había cambiará automáticamente la pantalla de todos modos al final del reproductor de moverlo?
En una pequeña sección de les habló de cómo alternar manualmente pantalla completa, interruptor del sensor de la gravedad al lado horizontal de la pantalla, la necesidad de utilizar la API de 5+ Acelerómetro sensor de aceleración
简单说：重力加速度感应可以想象成一个小球在坐标系中
三个方向上的加速度。永远以手机屏幕为准¿Cuál es la aceleración? La cantidad, es el libro de física
手机水平放置向上是y轴正向
向右是x轴正向，向外是z轴正向¿Qué es XYZ? La cantidad está en el alto número de libros
Oh, se pone la posición vertical retrato de teléfono en el suelo, los que andan fue en integridad, y ahora que está de pie en la pantalla de su teléfono, a continuación, se abre la mano derecha recta, que es el eje x, que ahora está buscando en la parte delantera, la cual es el eje y, el eje z es su cabeza. Esa forma de hablar no entiende, pero en realidad no quiere a paso en su teléfono, 23333
También puede optar por ver una explicación adicional: Android-Sensor Desarrollo - determinar la dirección
-
x, eje y cambios:
Cuando la pantalla del teléfono se coloca horizontalmente hasta: (x, y, z) = (0, 0, -9.81)
Cuando la parte superior del ascensor teléfono: y se reduce, y es negativo
cuando la parte inferior al levantar el teléfono: y aumenta, y es positivo
cuando el teléfono ascensor derecha: x se reduce, y un valor negativo
cuando el teléfono dejó de elevación: x aumenta, y positivo Cambios en el eje z:
la pantalla del teléfono es hacia arriba horizontalmente, z = -9,81
, cuando la pantalla del teléfono verticalmente, z = 0
cuando el teléfono se coloca horizontalmente abajo de la pantalla, z = 9,81Vertical pantalla estado de conexión
y <= - 5, la conmutación de la vertical,
x <= - 5, el transductor es un lateral
bien, hemos añadido dos métodos para abrir y cerrar la supervisión de dispositivos
//开启方向感应
pro.startWatchAcc = function(){
var that = this;
this.watchAccFun = plus.accelerometer.watchAcceleration(function(a) {
if(that.getIsMax()){
//当前为全屏状态
//判断是否满足竖屏Mini状态
a.yAxis>=5 && that.setIsMax(false);
}else{
//当前为Mini状态
//判断是否满足全屏Max状态
Math.abs(a.xAxis) >=5 && that.setIsMax(true);
}
}, function(e) {
//出错了大不了 不自动旋转呗 让它手动 切换
console.log("Acceleration error: " + e.message);
that.clearWatchAcc();
},{
frequency:1200
});
}
//关闭方向感应
pro.clearWatchAcc = function(){
this.watchAccFun && plus.accelerometer.clearWatch(this.watchAccFun);
}
A continuación, activado por defecto durante la monitorización de la dirección de inicialización
var bvd = function(dom) {
var that = this;
$.ready(function() {
//...
})
$.plusReady(function() {
that.startWatchAcc();
})
}Luego cambió a, de pantalla completa transversal horizontal de dos vías
Echar un vistazo a la depuración máquina real
Hey, añadimos una cerradura para dar botón de reproducción en pantalla completa, sensor de gravedad para que el dispositivo no supervisa ni pausa respuesta evento Click para reproducir vídeo
Hacer un botón de bloqueo
Por supuesto, bloqueo de imágenes, la dirección también cambió con la base 64, en el mejor de los js de etiquetas generadas dinámicamente
Establecer su estilo básico, derecha, arriba y abajo verticalmente centrada, oculto por defecto
.lock {
padding: .3rem;
width: 3rem;
height: 3rem;
position: absolute;
right: .5rem;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
visibility: hidden;
}
Bueno, vamos a resolver la lógica,
1) de forma predeterminada cuando se juega mini, bloqueo ocultar
2) reproducción en pantalla completa, bloquear la pantalla, pero seguirá la barra de control hacia la derecha en el 4S
3) de pantalla completa para la pausa, control de bloqueo seguido siempre se visualizan
4) Haga clic cuando el bloqueo está bloqueado, Tip bloqueado, ocultar la barra de control inmediatamente, oculto dentro lock4s correctas, sustituir el icono de bloqueo de pantalla de vídeo de eventos de clic, androide evento de tecla de retorno sin ningún cambio, una estrecha vigilancia de la gravedad
5) cuando se hace clic de bloqueo desbloqueado, desbloqueado, tecla de retorno androide pronta en lugar conmutada a la mini estado, monitorización gravedad abierto
Froto, en realidad es bastante deprimente, sobre todo la lógica de procesamiento más doloroso
0) Añadir una animación en movimiento justo después de 3s retrasan en 1 s después de ejecutar la animación
@keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}
webkit-keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}
.lockhidden {
animation: lockhide 1s 3s linear;
-webkit-animation: lockhide 1s 3s linear;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
}
1) la pantalla de bloqueo de pantalla
pro.switch = function() {
//...
//全屏时 显示锁定 图标
this.vlock.style.visibility = this.isMax ? 'visible' : 'hidden';
}2) la reproducción de pantalla completa, bloquear la pantalla, pero seguirá la barra de control hacia la derecha en el 4s
animaciones ocultos añadimos bloqueo cuando juego,
3) pausa de pantalla completa, controles de bloqueo se muestran siempre siguió
4) Haga clic en el tope a tope, encerrados rápido, la barra de control inmediata ocultos, escondidos en el interior lock4s correctas, sustituir el icono de bloqueo de pantalla de vídeo de eventos de clic, androide evento de tecla de retorno sin ningún cambio, una estrecha vigilancia de la gravedad
5) Haga clic en el candado está desbloqueado, Tip desbloqueado, tecla de retorno androide vez cambiar a mini-estado, abra el monitoreo gravedad
//锁定屏幕
pro.lockScreen = function() {
$.toast('锁定屏幕');
var that = this;
//更换video点击事件为 显示 lock图标，并保存 video之前的事件
this.videoTapFn = this.eve('tap', function() {
that.lockT = setTimeout(function(){
that.vlock.classList.add('lockhidden');
},500);
//重新开始播放样式
that.vlock.classList.remove('lockhidden');
that.vlock.style.visibility = 'visible';
}, true);
//隐藏控制条
this.vC.style.visibility = 'hidden';
//给Lock图标增加 隐藏样式类
this.vlock.classList.add('lockhidden');
//锁定屏幕时，不监控重力感应
this.clearWatchAcc();
//标识当前更改的Lock状态
this.isLock = true;
}
//解锁屏幕
pro.unlockScreen = function() {
$.toast('解锁屏幕');
//替换回video之前的点击事件
this.eve('tap', this.videoTapFn, true);
//给Lock图标清楚 隐藏样式类
this.vlock.classList.remove('lockhidden');
//不锁定屏幕时，监控重力感应
this.startWatchAcc();
//标识当前更改的Lock状态
this.isLock = false;
}
666) Por último, en nuestro icono de bloqueo querido aumentar un evento de toque, y el evento androide volver cambios clave
//全屏 时 锁定点击事件
this.vlock.addEventListener('tap', function() {
if(that.isLock) {
that.unlockScreen();
return;
}
that.lockScreen();
});
this.oback = $.back;
//监听安卓返回键
$.back = function(){
if(that.isMax){
if(!that.isLock){
//全屏状态下 按下返回键 时，1s内不监控重力，防止返回Mini状态时和重力感应并发事件
setTimeout(function(){
that.startWatchAcc();
},1000);
that.clearWatchAcc();
that.switch();
}
return;
}
that.oback();
}
}Bien! Esta demo artículo 5+ pantalla completa dirección de origen
el blog de escritura no es fácil, pero que comparten el estado de ánimo es muy bueno, no es de otra opinión y el progreso?
Gracias.
Este artículo Artículos relacionados: H5 crear su propia columna reproductor de vídeo