[SOLUCIONADO] crear un reproductor de video con botones propios

merops · #1 (**permalink**) 20/02/2015, 14:31

buenas noches :
tengo un lio con lo del video, tengo que hacer un video con botones propios, el de pausa y play van juntos, tiene que tener rewind y forward,
se que tengo que crear los botones y luego las funciones que les activen, y llamarlos , pero me he hecho un lio. he estado viendo videos de como se hacen, pero todo al final es con jquery y yo no se jquery, estoy empezando con html, javascript y css, y me pierdo,
tengo este cocigo

Código:

<!DOCTYPE HTML>
<html>
  <head>
    

  </head>
  
  <body>
<section >

<video 

src="video.mp4" 
type="video/mp4" 
width="1000"  controls 
poster="imagen.jpg"

<button onclick = "vid_play_pause ()"> Reproducir / Pausa </button>


<button onclick="document.getElementById('video1').rewin()">atras el video</button>
<button onclick="document.getElementById('video1').forward()">delante el video</button>
</ Video>


<Script>
function () {
  myVideo var = document.getElementById ("myVideo");
  si (myVideo.paused) {
    myVideo.play ();
  } Else {
    myVideo.pause ();
  }
}
</ Script>
</section>
</body>

  </body>
</html>

el video y los iconos de los botones(imagen.png o imagen.jpg) los tengo en una carpeta donde esta tambien el programa.
tiene que estar todo el codigo en la misma hoja, no vale hacer ni javascrip ni css en otros programas.
a ver si me aclaran como va, pues el rewin y el forwar lo he intentado y no me deja usarlo,
o no se usarlo
un saludo

PHPeros · #2 (**permalink**) 20/02/2015, 15:05

No es muy difícil hacerlo, solo tienes que manipular la propiedad currentTime del vídeo.

De todas formas, los controles ya existen nativamente, no hace falta volverlos a poner...

merops · #3 (**permalink**) 21/02/2015, 11:44

Ahhh. ¿Y como se hace eso? No tengo ni idea. ¿ y se muestran todos los botones?
Buff.¡esto de no saber!

Te agradecería me lo explicaras
Seguro q cuando lo vea dire . que falcil.
Un saludo y gracias

fede5426 · #4 (**permalink**) 21/02/2015, 14:16

En el html..

Código HTML:

Ver original<video width="640" height="480" src="video.mp4" controls />

Yo lo hago asi.. y se ve de esta manera:

Lo que veo en tu codigo es que "video" tiene etiqueta de apertura y de cierre.. pero en ningun lado cerras la etiqueta de apertura.. seria mas o menos como escribir <video</video>

merops · #5 (**permalink**) 22/02/2015, 05:07

hola ,
eso si se hacerlo, me sale igual que ati, gracias por decirme que <video> le falta el cierre,
pero necesito que salga el boton de hacia adelante y hacia atras tambien
seguire buscando gracias

merops · #6 (**permalink**) 22/02/2015, 07:22

encotre el codigo,
pero no entiendo la function restar, y tampoco me deja introducir en vez de el texto, una imagen al boton jpg
¿alguna idea?
os pongo el codigo

Cita:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
video1 {
position: absolute;
width: 205px;
height: 154px;
}
</style>

</head>
<script type="text/javascript">

function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}

function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>

</head>
<body>

<video id="Video1" >

<source src="video.mp4" type="video/mp4" />

</video>

<section >

<div id="buttonbar">

<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>

</section>
</body>
</html>

pzin · #7 (**permalink**) 22/02/2015, 09:36

La función de restar no tiene mucho misterio. Simplemente le pasas un valor y te cambia el currentTime del vídeo.

Luego si quieres poner una imagen pues puedes usar CSS. Que es lo suyo.

merops · #8 (**permalink**) 22/02/2015, 09:57

ok gracias