Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Видео плеер Html5 <video>

Автор: Karta 22.11.2012, 15:48

Добрый день!
Я новичок, так, что заранее извиняюсь, за глупые вопросы.
Я задумала сделать собственный видео плеер. Видео занрузила, оно у меня работает. Но мне не удается реализовать те функции, которые нужно. А нужно следующее: на шкале прокрутки видео надо сделать 2 деления, например на 10 и на 15 секунде. Когда бегунок доходит до этого деления он должен автоматически останавливаться на 10 и 15 секундах соответственно и при остановке должен показываться субтитр.
Субтитры и остановку видео я сделала, это работает, но работает только через кнопки. Вопрос в следующем:
1. Как сделать автоматическую остановку видео(на 10 и 15 секундах) без всяких кнопок.
2. Как мне нарисовать деления на шкале, в которых и будет останавливаться видео?
Привожу код того, что уже имею.

Код



<!doctype html>
<html lang=en>
<head>
<title>Accessible HTML5 video demo: how to leverage a synergy.</title>
<meta charset=utf-8>



</head>
<body>

<div id="container">

<video width=600 src="video.webm" controls="controls">
      <p>This page is to demonstrate open HTML5 video, so if you're not using a          browser that can display the open Ogg Theora codec, there's not  much to see. Sorry!</p>
</video>


<button title="Остановитьс 5 секунды" onclick="stopVideo();">
stop(5)</button>
<button title=Включить с 5 секунды" onclick="playAt(5);">
5 seconds</button>
<script>

function playAt(seconds){
var video = document.getElementsByTagName("video")[0];
video.currentTime = seconds;
video.play();
}


function stopVideo(){
var video=document.getElementsByTagName("video")[0];
video.currentTime=5;
video.pause();
}
</script>


</body>
</html>

Спасибо

Автор: Aliance 22.11.2012, 16:48

Если воспроизведение видео начинается по нажатию на кнопку - как вариант вызывать методы через setTimeout от нажатия на play.

Автор: Karta 22.11.2012, 17:24

Извините, а можно по подробней, как это прописать?

Автор: Karta 23.11.2012, 18:34

вот, написала функцию, но она не работает, может, кто подскажет, что не так?

Код



function playControl() {
var video = document.getElementById("Video1")
     if (video.paused == false && video.currentTime=5) {
        video.pause();
           
       
    } else {
        video.play();
     
              
    }
}

Автор: Arantir 23.11.2012, 18:51

Где точка и запятая во второй строке?

Автор: Karta 24.11.2012, 02:05

Не помогло... Может еще у кого какие нибудь идеи?

Автор: Sanchezzz 25.11.2012, 11:35

нафига геморой такой себе устраивать?
http://www.w3schools.com/tags/ref_av_dom.asp и повести свое событие ниже пример

Следивший обработчик срабатывает каждый раз когда проигрывается видио или изменяется таймер ползунка.

Код


var video = document.getElementById("Video1")
video.addEventListener("timeupdate", function(a)
  {
  console.log(video.currentTime);
  }
);

Нажимаем F12 в хроме и смотрим что получаем в консоле ...

Автор: Karta 26.11.2012, 17:45

Не знаю, что у Вас получается у меня получается перемотка на 5 секунду и зациклвание....

Автор: Sanchezzz 26.11.2012, 18:37

Это потому, что вы присваивайте video.currentTime=5 А вам нужно сравнение ==

выдержка из документации

Definition and Usage
The currentTime property sets or returns the current position (in seconds) of the audio/video playback.
When setting this property, the playback will jump to the specified position.
Syntax
Set the currentTime property:
audio|video.currentTime="seconds"

Return the currentTime property:
audio|video.currentTime

Решение вашей проблемы...

Код


var video = document.getElementById("Video1")
video.addEventListener("timeupdate", function(a)
{  // проверяем позицию равно 10 или 15 если да то стопаем
    if(video.currentTime==10 || video.currentTime==15) video.pause();
  
  }
);

Автор: Karta 27.11.2012, 17:16

У Вас это сработало? Потому как у меня ничего не работает. Обработчики кнопок работают, а автоматическая приостановка нет...

Автор: Sanchezzz 27.11.2012, 18:55

там нужно округление делать нужно при проверке Math.round( video.currentTime)==5

http://jsfiddle.net/5g2rm/3/

Автор: Karta 27.11.2012, 23:45

Спасибо большое за ссылку.
Все работает! smile