временная ссылка видео
На ум приходит только использование БД но как МНЕ кажется эта не рациональное использование БД и после буферизации сбрасывать урл. Есть какие варианты без БД наведите на мысль в какую сторону копать.
Отслеживать
задан 1 июн 2016 в 22:04
Олег Косарев Олег Косарев
89 5 5 бронзовых знаков
Я не совсем понял если чесно поэтому пишу в коментариях.Вообщем я могу предложить скажем через пока сесия не закончиться выводить видео(это в php).а в JS можна поставить время и по окончанию этого временни задавать через CSS display:none.Не знаю помогло ли хоть немного мои идеи, но надеюсь.
2 июн 2016 в 0:32
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
я на php смог придумать вот что
header("Content-Type: video/x-mp4"); header("X-Accel-Redirect:/rvp/" . $filename); readfile("/rvp/".$filename); die(); > echo "403"; ?>
В свою очередь запрос происходит по пути «/newEmptyPHP.php?hash=2d093474d45b8e7eba4a342c474c696d&filename=video1.mp4» которая и идёт уже в тег видео. и даже если и есть ссылка скачать не получится так как SERVER[«HTTP_REFERER»]. Насколько правильно не знаю но вроде работает. В свою как можно понять будет действовать пока минута запроса будет равна текущей минуте
Как вывести продолжительность из тега video php
Вместе с новыми элементами audio и video в HTML5 был добавлен новый API в JavaScript для управления этими элементами. С помощью кода JavaScript мы можем получить элементы video и audio (как и любой другой элемент) и использовать их свойства. В JavaScript эти элементы представлены объектом HTMLMediaElement , который с помощью свойств, методов и событий позволяет управлять воспроизведением аудио и видео. Отметим наиболее важные свойства, которые могут нам пригодиться для настройки этих элементов:
- playbackRate : устанавливает скорость воспроизведения. По умолчанию равно 1
- src : возвращает название воспроизводимого ресурса, если он установлен в коде html элемента
- duration : возвращает длительность файла в секундах
- buffered : возвращает длительность той части файла, которая уже буферизирована и готова к воспроизведению
- controls : устанавливает или возвращает наличие атрибута controls . Если он установлен, возвращается true , иначе возвращает false
- loop : устанавливает или возвращает наличие атрибута loop . Если он установлен, возвращается true , иначе возвращает false
- muted : устанавливает или возвращает наличие атрибута muted
- preload : устанавливает или возвращает наличие атрибута preload
- volume : устанавливает или возвращает уровень звука от 0.0 до 1.0
- currentTime : возвращает текущее время воспроизведения
Отдельно для элемента video мы можем использовать ряд дополнительных свойств:
- poster : устанавливает или возвращает атрибут poster
- height : устанавливает или возвращает атрибут height
- width : устанавливает или возвращает атрибут width
- videoWidth, videoHeight : для элемента video возвращают ширину и высоту видео
Следует также отметить два метода, с помощью которых мы можем управлять воспроизведением:
- play() : начинает воспроизведение
- pause() : приостанавливает воспроизведение
Основные события элементов video и audio:
- canplaythrough : это событие срабатывает после загрузки страницы, если браузер определит, что он может воспроизводить это видео/аудио
- pause : событие срабатывает, когда воспроизведение мультимедиа приостанавливается, и оно переводится в состояние «paused»
- play : событие срабатывает, когда начинается воспроизведение файла
- volumechange : срабатывает при изменении уровня звука мультимедиа
- ended : срабатывает при окончании воспроизведения
- timeupdate : срабатывает при изменении времени воспроизведения
- error : генерируется при возникновении ошибки
- loadeddata : срабатывает, когда будет загружен первый фрейм видеофайла
- loadedmetadata : срабатывает после загрузки метаданных мультимедиа (длительность воспроизведения, размеры видео и т.д.)
- seeking : срабатывает, когда пользователь начинает перемещать курсор по шкале воспроизведения для перемещения к новому месту аудио- или видеофайла
- seeked : срабатывает, когда пользователь завершил перемещение к новому месту на шкале воспроизведения
Теперь используем некоторые из этих свойств, событий и методов для управления элементом video:
Аудио в HTML5 .hidden < display:none; >#playBtnPlay 00:00
Вначале в коде JavaScript мы получаем все элементы. Затем, если браузер поддерживает видео и может его воспроизвести, то обрабатываем событие canplaythrough , устанавливая уровень звука и удаляя класс hidden:
videoEl.addEventListener('canplaythrough', function () < vidControls.classList.remove('hidden'); videoEl.volume = volumeControl.value; >, false);
Чтобы запустить воспроизведение, нам надо обработать нажатие ссылки Play:
playBtn.addEventListener('click', function () < if (videoEl.paused) < // если видео остановлено, запускаем videoEl.play(); >else < videoEl.pause(); >>, false);
Обрабатывая события запуска и остановки воспроизведения, мы можем изменять надпись на ссылке:
videoEl.addEventListener('play', function () < playBtn.innerText = "Pause"; >, false); videoEl.addEventListener('pause', function () < playBtn.innerText = "Play"; >, false);
Обрабатывая событие input , которое возникает при изменении значения ползунка, мы можем синхронизировать изменение ползунка и громкость видео:
volumeControl.addEventListener('input', function () < videoEl.volume = volumeControl.value; >, false);
Обработка события ended позволит сбросить время воспроизведения:
videoEl.addEventListener('ended', function () < videoEl.currentTime = 0; >, false);
А обработчик события timeupdate позволит динамически изменять показатель времени воспроизведения:
videoEl.addEventListener('timeupdate', function () < timePicker.innerHTML = secondsToTime(videoEl.currentTime); >, false);
Для форматирования строки времени применяется вспомогательная функция secondsToTime . В итоге мы получим следующие элементы воспроизведения:
Ну и подобным образом можно добавить другие элементы, например, шкалу воспроизведения, какие-то другие кнопки.
Управление HTML5-плеером с помощью JavaScript
На данный момент мы изучили довольно сложный материал. Мы теперь знаем, как с помощью элементов и создать решение с достаточно удовлетворительным уровнем браузерной поддержки, которое работает на большем количестве браузеров, чем сегодняшние решения на основе Flash. Совсем неплохо для необкатанной новой технологии!
Используя только HTML-разметку, это, пожалуй, все, что можно выжать из элементов и . Но для обоих элементов существует обширная объектная модель JavaScript, посредством которой можно управлять воспроизведением с помощью сценариев. Более того, используя этот подход, можно даже настроить некоторые детали, такие как, например, скорость воспроизведения, что невозможно со стандартными аудио- и видеопроигрывателями.
В следующих разделах мы изучим поддержку JavaScript, рассмотрев практический пример — создадим специализированный видеопроигрыватель. В завершение мы рассмотрим решения, созданные другими разработчиками с использованием мощной смеси HTML5 и JavaScript, включая высокопроизводительные проигрыватели со скинами и редактируемыми субтитрами.
Создание своего видеопроигрывателя
Одним из основных поводов заняться углубленным изучением программирования элементов и в JavaScript будет создание собственного проигрывателя. Основная идея заключается в простоте процесса — удаляем атрибут controls, чтобы было только окно воспроизведения, и добавляем внизу его свои кнопки управления воспроизведением. А чтобы эти кнопки функционировали, добавляем соответствующий JavaScript-код.
Любому видеопроигрывателю требуется базовый набор кнопок управления воспроизведением. Стандартные кнопки управления воспроизведением проигрывателя создаются следующим кодом:
var video; var display; window.onload = function() < video = document.getElementById("videoPlayer"); >; function play() < video.play(); >function pause() < video.pause(); >function stop()
Функции других кнопок управления воспроизведением не совсем стандартные — они используются для регулирования скорости воспроизведения путем значения свойства playbackRate. Например, при значении playbackRate равным 2 видео проигрывается вдвое быстрее нормальной скорости, но с откорректированной высотой тона, вследствие чего звук воспроизводится нормально, только вдвое быстрее.
Это замечательная возможность для ускоренного просмотра медленных видеоинструкций. Аналогично, при значении playbackRate равном 0.5 видео проигрывается со скоростью, составляющей половину нормальной скорости. При значении playbackRate равном -1 видео должно проигрываться с нормальной скоростью, только в обратном направлении, но браузеры сталкиваются с проблемой реализации этого режима должным образом. Код для реализации этих функций следующий:
function speedUp() < video.play(); video.playbackRate = 2; >function slowDown() < video.play(); video.playbackRate = 0.5; >function normalSpeed()
Задача создания индикатора хода воспроизведения представляет несколько больший интерес. В отношении разметки он создается из двух элементов , один из которых вложен в другой, который находится в корневом контейнере (в данном примере тоже div):
Внешний элемент (с именем durationBar) рисует черную рамку, которая обрамляет весь индикатор и имитирует полную продолжительность видео. Внутренний элемент (с именем positionBar) указывает текущую точку воспроизведения, заполняя часть черного индикатора синим цветом. Наконец, элемент внутри внутреннего элемента содержит текст, указывающий текущую позицию воспроизведения в секундах.
Далее приведены правила таблицы стилей, которые устанавливают размер индикаторов и окрашивают их в соответствующие цвета:
#positionBar < height: 30px; color: white; font-weight: bold; background: steelblue; text-align: center; >#positionBar span < display: inline-block; margin-top: 5px; >#durationBar
В процессе воспроизведения элемент постоянно активирует событие onTimeUpdate. Реагируя на это событие, обновляем индикатор хода воспроизведения:
А этот код получает от свойства currentTime значение текущей позиции в видео, разделяет его на общее время (свойство duration) и преобразует результат в процентное значение, которое используется для установления размера div-элемента postitionBar:
function progressUpdate() < // Устанавливаем позицию воспроизведения var positionBar = document.getElementById("positionBar"); positionBar.style.width = (video.currentTime / video.duration * 100) + "%"; // Заполняем текстовую надпись текущим значением displayStatus = document.getElementById("displayStatus"); displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " сек"; >
Можно сделать индикатор выполнения немного замысловатей, добавив индикатор загрузки, показывающий объем содержимого, загруженного и помещенного в буфер в данный момент. Эта возможность уже имеется в проигрывателях, встроенных в браузеры. Чтобы добавить этот индикатор, нужно обрабатывать событие onProgress и работать со свойством seekable. Дополнительную информацию о свойствах, методах и событиях элемента смотрите на странице msdn.microsoft.com/ru-ru/library/ff975073.aspx.
Проигрыватели на JavaScript
Если вы не хотите ни от кого зависеть в своей работе, то можете создать свой аудио- или видеопроигрыватель с чистого листа. Но это будет очень трудоемким проектом, особенно если вы хотите обеспечить разные вычурные возможности, наподобие интерактивного списка воспроизведения. К тому же, если за вашей спиной нет небольшого дизайнерского отдела, то существует отчетливая вероятность, что конечный продукт ваших усилий будет иметь слегка уродливый внешний вид (как показано выше ;).
К счастью, для веб-дизайнеров, блуждающих в поисках идеального HTML5-проигрывателя, имеется лучший вариант. Вместо того чтобы разрабатывать мультимедийный проигрыватель самому, можно взять бесплатный, настраиваемый посредством JavaScript проигрыватель в Интернете. Два из них — это VideoJS и, для фанатов библиотеки jQuery — jPlayer. Оба проигрывателя легковесные, удобны в использовании, а также имеют функцию смены скинов с помощью таблицы стилей. Например сервис VideoJS позволяет создать вручную скин медиаплеера:
Большинство проигрывателей мультимедиа на JavaScript (включая проигрыватели VideoJS и jPlayer) содержат встроенные резервные решения Flash, что позволяет разработчику сэкономить время и усилия на поиски отдельного Flash-проигрывателя. А проигрыватель jPlayer имеет удобную функцию создания списка воспроизведения, позволяющего выбрать для проигрывания или просмотра несколько файлов.
Чтобы использовать VideoJS в своих разработках, сначала загрузите его JavaScript-файлы с веб-сайта проигрывателя. Потом вставьте ссылку на его сценарий и таблицы стилей, как показано в следующем коде:
Затем используется обычный элемент с несколькими элементами и резервным решением Flash. (Для резервного Flash-решения в проигрывателе VideoJS используется Flowplayer, но его можно удалить и использовать другой Flash-проигрыватель.) По сути, единственная разница между обычной страницей HTML5 и страницей с проигрывателем VideoJS состоит в том, что в последней нужно использовать специальный класс в элементе :
JS события медиа элемента audio и video
В статье представлены DOM события для медиа элемента HTML5 audio и video, возникающие при его обработке в браузере. Для событий приводятся их описания, моменты возникновения, состояния свойств медиа элемента при событиях.
Демонстрацию описанных здесь событий можно посмотреть и попробовать на странице: «Демонстрация JS управления HTML5 video и audio» .
События медиа объекта audio и video
Ниже перечисленные события вызываются в браузере для медиа элемента audio и video и медиа контроллера, если он поддерживается. Такие события, как emptied, loadedmetadata, loadeddata, canplay, canplaythrough, playing, ended, waiting, durationchange, timeupdate, play, pause, ratechange, volumechange возникают как для медиа элемента, так и для медиа контроллера (если он поддерживается браузером), который управляет подчиненными ему медиа элементами, которые он представляет.
loadstart
Событие loadstart возникает, когда браузер начал выполнять поиск медиа файла в процессе исполнения алгоритма выбора ресурса для медиа элемента. Свойство media.networkState устанавливается как NETWORK_LOADING.
progress
Событие progress возникает, когда браузер начал выполняет загрузку медиа файла. Свойство media.networkState равно NETWORK_LOADING. Это событие может возникать несколько раз в ходе воспроизведения, если медиа файл подгружается ступенчато, по мере запроса следующей его части, необходимой для воспроизведения.
suspend
Событие suspend возникает, когда браузер перешел в ожидание команды на старт загрузки медиа файла, т.е. браузер установил источник медиа файла, но не загружает его, так как ожидает команды (события) от пользователя на старт загрузки. Это, так сказать, «состояние ожидания«, когда для элемента аудио или видео на web странице не стоит автозагрузка и авто воспроизведение, поэтому, браузер не начинает сам выполнять загрузку файла, а ожидает на это команды от пользователя, например, на старт воспроизведения файла. И только после команды от пользователя браузер приступит к загрузке файла. Свойство media.networkState равно NETWORK_IDLE.
abort
Событие abort возникает, когда браузер преждевременно перестал продолжать загружать медиа файл, не достигнув окончания загрузки, по причине прерывания этого действия пользователем, а не из-за ошибки. Свойство media.error.code будет соответствовать MEDIA_ERR_ABORTED, свойство media.networkState будет как NETWORK_EMPTY или как NETWORK_IDLE, в зависимости от того когда загрузка была прервана пользователем.
error
Событие error возникает, когда произошла ошибка при получении и загрузки медиа файла. Свойство media.error медиа элемента является объектом и его свойство media.error.code будет при этом событии как MEDIA_ERR_NETWORK (значение 2) или выше, media.networkState будет как NETWORK_EMPTY или NETWORK_IDLE, в зависимости от того, когда загрузка была прервана и возникла ошибка.
emptied
Событие emptied возникает, когда для медиа элемента, который предварительно имел значение свойства media.networkState не равное NETWORK_EMPTY произошла установка данного свойства в значение NETWORK_EMPTY. Это может произойти при возникновении ошибки в процессе загрузки медиа файла (например, обрыв связи и т.п.), или когда метод media.load() был вызван уже в процессе работы алгоритма выбора ресурса для медиа элемента. При этом событии свойство media.networkState будет установлено как NETWORK_EMPTY и другие свойства медиа элемента будут сброшены в первоначальный значения, которые они имели при инициализации медиа объекта. Свойство media.readyState будет равно HAVE_NOTHING значению.
Для медиа контроллера (MediaController) событие emptied возникает, когда управляемые им медиа элементы заново получают значение свойства MediaController.readyState равное HAVE_NOTHING, или когда для данного медиа контролера отсутствуют какие либо управляемые им медиа элементы.
stalled
Событие stalled возникает, когда браузер пытается получить и загрузить медиа файл, но ожидаемая порция данных не поступает, например, при медленном сетевом соединении и возникает, так сказать, состояние «подвисания«. Это еще не ошибка, а лишь задержка в получении данных, и поступление данных может продолжиться или может прерваться полностью, что вызовет уже ошибку. Свойство media.networkState при этом событии равно значению NETWORK_LOADING.
loadedmetadata
Событие loadedmetadata возникает для медиа элемента и для медиа контроллера, когда браузер успешно загрузил метаданные медиа файла — длительность, размер, текстовые треки. Свойство media.readyState элемента и свойство MediaController.readyState при этом событии будет установлено заново как HAVE_METADATA или выше.
loadeddata
Событие loadeddata возникает для медиа элемента и для медиа контроллера, когда браузер в первый раз успешно загрузил необходимые для воспроизведения с текущей позиции курсора медиа данные (или необходимую порцию данных) и может начать их проигрывать. Свойство media.readyState и свойство MediaController.readyState при этом событии будет заново установлено в значение HAVE_CURRENT_DATA или большее.
canplay
Событие canplay возникает для медиа элемента и для медиа контроллера, когда браузер готов и может продолжить или начать воспроизведение медиа файла, однако считает, что если воспроизведение было бы запущено прямо сейчас, то, для текущей скорости воспроизведения, медиа файл не сможет быть проигран до его полного окончания без остановки воспроизведения для буферизации медиа данных. Свойство media.readyState и свойство MediaController.readyState при этом событии будет заново установлено в значение HAVE_FUTURE_DATA или большее.
canplaythrough
Событие canplaythrough возникает для медиа элемента и для медиа контроллера, когда браузер считает, что если бы воспроизведение было бы запущено прямо сейчас, то медиа файл мог бы быть проигран до его полного окончания на текущей скорости воспроизведения без остановок и прерываний для буферизации медиа данных. Свойство media.readyState и свойство MediaController.readyState при этом событии будет заново установлено в значение HAVE_ENOUGH_DATA или большее.
playing
Событие playing возникает, когда воспроизведение медиа файла начинается после того, как оно было остановлено или задержано из-за отсутствия поступления необходимых для этого медиа данных. При этом событии свойство media.readyState заново установлено в значение HAVE_FUTURE_DATA или большее и свойство media.paused равно или заново установлено в значение false . Однако, несмотря на то, что событие playing возникло, медиа файл, все же, может и не начать воспроизводиться, например, если медиа элемент заблокирован его медиа контроллером, в котором установлена пауза для воспроизведения и т.п. Таким образом событие playing означает только готовность браузера начать воспроизведение медиа файла, но не само воспроизведение, которое к тому же не гарантированно.
Для медиа контроллера событие playing означает, что медиа контроллер разблокирован для начала воспроизведения медиа файла.
waiting
Событие waiting возникает для медийного элемента и для медиа контроллера, когда воспроизведение медиа файла остановилось из-за отсутствия для этого следующего кадра и браузер поэтому прервал воспроизведение и ожидает (рассчитывает), что необходимый следующий кадр станет доступным в порядке очереди в ближайший момент времени. Иными словами, событие waiting означает ожидание браузером следующей порции медиа данных для воспроизведения. При низко пропускном сетевом соединении это достаточно часто возникающее событие. При этом событии свойство media.readyState равно значению HAVE_CURRENT_DATA или меньшему и свойство media.paused имеет значение false . Также свойство media.seeking равно true или текущая позиция воспроизведения не содержится ни в одном из диапазонов из объекта media.buffered.
seeking
Событие seeking возникает, когда свойство media.seeking было изменено на значение true и началось выполнение пользователем смены положения курсора воспроизведения для поиска и установки новой позиции воспроизведения, т.е. пользователь, в текущий момент, начал выбирать новое место воспроизведения на шкале проигрывания медиа файла, но еще не закончил этот процесс, т.е. курсор находиться в движении.
seeked
Событие seeked возникает, когда свойство media.seeking было изменено на значение false после того, как была выполнена и закончена смена пользователем текущей позиции курсора воспроизведения. Это событие означает, что перемещение курсора воспроизведения (прокрутка, поиск) по медиа файлу закончилось.
ended
Событие ended возникает для медийного элемента и для медиа контроллера, когда воспроизведение было остановлено по причине достижение конца медиа файла. При этом событии свойство media.currentTime равно времени окончания медиа файла (это не всегда может быть именно длительность медиа файла) в плеере и свойство media.ended установлено в значение true .
durationchange
Событие durationchange возникает для медийного элемента и для медиа контроллера, когда свойство media.duration (общая длительность медиа файла в секундах) было обновлено для медиа элемента. Обычно это происходит при загрузке медиа элемента на web странице, но может возникать и когда элемент уже загружен, например, для потокового видео.
timeupdate
Событие timeupdate возникает для медийного элемента и для медиа контроллера в момент, когда произошло изменение текущей позиции воспроизведения на новое значение. Текущая позиция воспроизведения есть время на временной линии медиа плеера и определяется как свойство media.currentTime для медиа элемента. Событие timeupdate возникает как в ходе нормального воспроизведения файла, так и в ходе любого другого варианта изменения текущей позиции воспроизведения, например, в ходе перемещения курсора воспроизведения пользователем на временной шкале плеера. Этим событием удобно пользоваться если нужно постоянно получать актуальную текущую позицию курсора воспроизведения.
play
Событие play возникает для медийного элемента и для медиа контроллера в момент, когда начинается воспроизведение медиа файла в плеере. Событие play возникает как результат работы метода play() или когда старт воспроизведения медиа файла был вызван автоматически, потому что значение свойства media.autoplay и одноименного HTML атрибута autoplay задано как true . При этом событии свойство media.paused заново устанавливается в значение false .
pause
Событие pause возникает для медийного элемента и для медиа контроллера в момент, когда воспроизведение медиа файла было остановлено в плеере, что возникает как результат работы метода media.pause(). При этом событии свойство media.paused заново устанавливается в значение true .
ratechange
Событие ratechange возникает для медийного элемента и для медиа контроллера в момент, когда значения свойств media.defaultPlaybackRate или media.playbackRate медиа элемента были изменены.
resize
Событие resize возникает в момент, когда значения свойств media.videoHeight и(или) media.videoWidth видео элемента были обновлены или инициализированы. Событие возникает при загрузке или перезагрузке медиа элемента на странице и свойственно только для видео элемента, т.к. именно он имеет свойства высоты и ширины у видео файла. При этом событии, значение свойства media.readyState не должно быть равно HAVE_NOTHING, т.е. элемент должен иметь действительные размеры, иначе событие не наступит (нет значений для установки), а значения свойств media.videoHeight и media.videoWidth будут заданы равными 0 нулю.
volumechange
Событие volumechange возникает для медийного элемента и для медиа контроллера, когда было выполнено изменение значения свойства media.volume или media.muted для медийного элемента, т.е. произошло изменение уровня громкости или включение/выключение звука в медиа плеере.
События TrackList объекта
Ниже описанные TrackList события возникают для таких js объектов как: AudioTrackList, VideoTrackList и TextTrackList, которые являются значениями одноименных свойств media.audioTracks, media.videoTracks, media.textTracks медиа элемента.
change
Событие change возникает в момент, когда один или несколько соответствующих событию треков были добавлены или удалены из соответствующего TrackList объекта.
addtrack
Событие addtrack возникает в момент, когда один или несколько соответствующих событию треков были добавлены в соответствующий TrackList объект.
removetrack
Событие removetrack возникает в момент, когда один или несколько соответствующих событию треков были удалены из соответствующего TrackList объекта.
Способы и общие примеры добавления обработчиков событий медиа элемента:
Добавить обработчик (функцию исполняемую по событию) для события медиа элемента можно несколькими способами:
//путем использования HTML атрибута с именем onимя_события для тега audio и video var myVideo = document.getElementById("video-example-1"); //через атрибут тега <video onloadstart="alert(this)" onplay="myfunction(this)"> . video> //или myVideo.setAttribute('onplay', "myfunction(this)"); //или myVideo.onplay = function () < . >; //Путем использования специальных методов addEventListener и attachEvent //добавление обработчика для одного события loadstart myVideo.addEventListener("loadstart", function() < . >, false); //добавление обработчика для нескольких событий var media_events = ["loadstart", "progress", "play"]; function init_events() < for (key in media_events) < myVideo.addEventListener(media_events[key], myfunction, false); > >
При полном или частичном использовании материалов c сайта Andew.ru активная гиперссылка на главную страницу Andew.ru обязательна.
© 2020 Andew.ru
All rights reserved