Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Видео плеер Html5 <video>, Функции для видео плеера 
:(
    Опции темы
Karta
Дата 22.11.2012, 15:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
Добрый день!
Я новичок, так, что заранее извиняюсь, за глупые вопросы.
Я задумала сделать собственный видео плеер. Видео занрузила, оно у меня работает. Но мне не удается реализовать те функции, которые нужно. А нужно следующее: на шкале прокрутки видео надо сделать 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>



Спасибо

Это сообщение отредактировал(а) Karta - 22.11.2012, 15:50
PM MAIL   Вверх
Aliance
Дата 22.11.2012, 16:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137
Если воспроизведение видео начинается по нажатию на кнопку - как вариант вызывать методы через setTimeout от нажатия на play.


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
Karta
Дата 22.11.2012, 17:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
Извините, а можно по подробней, как это прописать?
PM MAIL   Вверх
Karta
Дата 23.11.2012, 18:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
вот, написала функцию, но она не работает, может, кто подскажет, что не так?

Код


function playControl() {
var video = document.getElementById("Video1")
     if (video.paused == false && video.currentTime=5) {
        video.pause();
           
       
    } else {
        video.play();
     
              
    }
}
PM MAIL   Вверх
Arantir
Дата 23.11.2012, 18:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55
Где точка и запятая во второй строке?


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
Karta
Дата 24.11.2012, 02:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
Не помогло... Может еще у кого какие нибудь идеи?
PM MAIL   Вверх
Sanchezzz
Дата 25.11.2012, 11:35 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
нафига геморой такой себе устраивать? 
Документацию лучше откройте и повести свое событие ниже пример

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

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


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


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 26.11.2012, 17:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
Не знаю, что у Вас получается у меня получается перемотка на 5 секунду и зациклвание....
PM MAIL   Вверх
Sanchezzz
Дата 26.11.2012, 18:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Это потому, что вы присваивайте 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();
  
  }
);



Это сообщение отредактировал(а) Sanchezzz - 26.11.2012, 18:38


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 27.11.2012, 17:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
У Вас это сработало? Потому как у меня ничего не работает. Обработчики кнопок работают, а автоматическая приостановка нет...
PM MAIL   Вверх
Sanchezzz
Дата 27.11.2012, 18:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
там нужно округление делать нужно при проверке Math.round( video.currentTime)==5

вот рабочий пример 


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 27.11.2012, 23:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0
Спасибо большое за ссылку.
Все работает! smile
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0525 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.