html5 видеоплеер: клик по времени

Digdug
На сайте с 11.07.2012
Offline
119
608

На youtube есть такая прекрасная фича: если в описании написать 5:15, то это будет ссылкой, кликнув на которую плеер автоматически включится на этом месте. Можно ли сделать также со стандартным html5 видеоплеером?

Нашел такой вариант http://www.annodex.net/~silvia/itext/mediafrag.html#t=74 , но здесь без клика по ссылке)

Joker-jar
На сайте с 26.08.2010
Offline
154
#2

Пример серверной части обработки описания/комментариев:

<?php

function parse_time($time)
{
$seconds = 0;

$time = array_reverse( explode(':', $time) );
if ( count($time) > 3 ) return false;

foreach ($time as $index => $item)
{
if ( ! preg_match('/^([0-9]+)?$/', $item) ) return false;
$item = intval($item);
if ( $item < 0 || $item > 59 ) return false;
$seconds += $item * pow(60, $index);
}

return $seconds;
}

function filter_user_text_callback($args)
{
$time = $args[0];

if ( ! ( $seconds = parse_time($time) ) ) return $time;
//--Тут мы в $seconds имеем тайминг в секундах. Можно сравнить его с общей длиной видео, и, если выходит за предел, то вернуть также $time
//--
return sprintf('<a class="timing" href="#" data-timing="%s">%s</a>', $seconds, $time);
}

function filter_user_text($text)
{
//--Тут всякие обработки комментария, например:
$text = trim($text);
$text = htmlspecialchars($text);
$text = preg_replace('/(\r\n){2,}|(\r){2,}|(\n){2,}/', '</p><p>', $text);
$text = '<p>' . nl2br($text, false) . '</p>';
//--Тут поиск и обработка таймингов:
$text = preg_replace_callback('%[0-9]{1,2}:[0-9]{2}(:[0-9]{2})?%', 'filter_user_text_callback', $text);

return $text;
}

$comment = 'Текст комментария с 0:34 таймингами 1:05:18 :)';

echo filter_user_text($comment);

?>

Данный код заменит тайминги на ссылки вида

<a class="timing" href="#" data-timing="3918">1:05:18</a>

В атрибуте data-timing хранится секунда, на которую указывает тайминг. Ну и далее нужно при помощи того же jQuery перехватывать клики на .timing, выковыривать секунду .data('timing') и, по всей видимости, устанавливать currentTime для video.

Накидал на коленке, но в целом суть должна быть ясна.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий