Jump to content
  • 0

html5 video autoplay

vfp7

Asked by vfp7,

 Share

Question

vfp7 Explorer

vfp7

Posted
Posted

Добрый день

Вы меня можете помнить по теме видеонаблюдение ... :) (© Симсоны)

Не могу победить маленькую для профи, но неразрешимую для ламеров, то есть для меня проблемку:

нужно добиться автопроигрывания видеопотока с сервера видеонаблюдения, в коде ниже поток запустится только после правого клика на картинке "contlol" и выборе пункта "открыть видео", а надо чтобы сразу автоматически пошло отображение видеопотока.

Код:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Видеонаблюдение в HTML5</title>

</head>

<body onload="java script:video.play()"> ### здесь я пытался при загрузке страницы включить отображение видеопотока ###

<p><video class="video-stream" autoplay="autoplay" controls="controls"

preload="none" src="http://security:8081/stream.mjpg"

type="video/mjpg; codecs=mjpg">

Смените Вашего осла на рыжика!</video></p>

</body>

</html>

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
swetlana Explorer

swetlana

Posted
Posted

код, конечно, не мешало бы и подчистить.

И onload="java script:video.play()" привести в порядок, убрав лишний пробел.

Но почему не начинает сразу проигрывать при autoplay="autoplay", неясно. Всё должно быть верно.

А есть ли возможность показать страницу хотя бы с тестовыми данными?

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
лишний пробел

Это медвежья услуга форумного движка (как бы перестраховка от XSS). Другое дело, что метка "javаscript:" в обработчиках событий вида onчто-то вообще ни к селу ни к городу не пристала :)

Link to comment
Share on other sites
  • 0
vfp7 Explorer

vfp7

Posted
  • Author
Posted
код, конечно, не мешало бы и подчистить.

И onload="java script:video.play()" привести в порядок, убрав лишний пробел.

Но почему не начинает сразу проигрывать при autoplay="autoplay", неясно. Всё должно быть верно.

А есть ли возможность показать страницу хотя бы с тестовыми данными?

Вот код с реальными данными, это поток с сервера видеонаблюдения аквапарка (найдено в google), все совершено аналогично - нет автопроигрывания:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Видеонаблюдение в HTML5</title>

</head>

<body onload="java script:video.play()">

<p><video class="video-stream" autoplay="autoplay" controls="controls"

preload="none" src="http://video.kva-kva.ru:8081/stream.mjpg"

type="video/mjpg; codecs=mjpg">

Смените Вашего осла на рыжика!</video></p>

</body>

</html>

Link to comment
Share on other sites
  • 0
vfp7 Explorer

vfp7

Posted
  • Author
Posted
Ответ лежал на поверхности.

<img src="http://video.kva-kva.ru:8081" />

:)

Почти, только используя img src мы будем использовать отображение потока в виде перегружаемых картинок, а при использовании video мы используем установленный в ОС проигрыватель, с поддержкой 2D и 3D ускорений ...

Тег img src используется в текущей версии системы видеонаблюдения, и при 8 камерах начинаются затычки рендеринга, HTML5 с тэгом video как раз и должен исправить эту проблему, если удастся победить автопроигрывание :)

Link to comment
Share on other sites
  • 0
vfp7 Explorer

vfp7

Posted
  • Author
Posted

Прилагаю один из текущих кодов системы видеонаблюдения, он то и ступорится на слабой машине из за использования img src :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr" lang="ru"><head>

<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">

<title>Видеонаблюдение СМК</title>

<script>

window.onbeforeunload = function (oEvent) {

document.getElementById('close').src = 'close.php';

oEvent.returnValue = " ";

}

</script><!--[if IE]>

<script>

window.onbeforeunload = function () {

document.getElementById('close').src = 'close.php';

window.event.returnValue = " ";

}

</script>

<![endif]-->

<meta content="motion GUI" name="description">

</head><body style="overflow: visible; color: white; background-color: black;">

<div style="width: 100%; height: 100%;">

<table style="border: 1px solid ; width: 100%; height: 100%;" border="1" cellpadding="1" cellspacing="1">

<caption style="caption-side: right;"><br>

</caption> <tbody>

<tr>

<td style="text-align: left; vertical-align: top;"> <a href="view.html?port=8083" target="newtab"> <img style="border: 1px solid ; width: 99%; height: 99%;" alt="Периметр 2" src="http://security:8083/stream.mjpg" align="middle" hspace="1" vspace="1"> </a> </td>

<td style="text-align: left; vertical-align: top;"> <a href="view.html?port=8084" target="newtab"> <img style="border: 1px solid ; width: 99%; height: 99%;" alt="Периметр 3" src="http://security:8084/stream.mjpg" align="middle" hspace="1" vspace="1"> </a> </td>

<td style="text-align: left; vertical-align: top;"> <a href="view.html?port=8081" target="newtab"> <img style="border: 1px solid ; width: 99%; height: 99%;" alt="Отгрузка" src="http://security:8081/stream.mjpg" align="middle" hspace="1" vspace="1"> </a> </td>

</tr>

<tr>

<td style="text-align: left; vertical-align: top;"> <a href="view.html?port=8085" target="newtab"> <img style="border: 1px solid ; width: 99%; height: 99%;" alt="Периметр 4" src="http://security:8085/stream.mjpg" align="middle" hspace="1" vspace="1"> </a> </td>

<td style="text-align: left; vertical-align: top;"> <a href="view.html?port=8086" target="newtab"> <img style="border: 1px solid ; width: 99%; height: 99%;" alt="Периметр 5" src="http://security:8086/stream.mjpg" align="middle" hspace="1" vspace="1"> </a> </td>

<td style="text-align: left; vertical-align: top;"> <a href="view.html?port=8082" target="newtab"> <img style="border: 1px solid ; width: 99%; height: 99%;" alt="Проходная" src="http://security:8082/stream.mjpg" align="middle" hspace="1" vspace="1"> </a> </td>

</tr>

<tr>

<td style="text-align: center; vertical-align: middle;"> <a href="ftp://security/" target="newtab"> архив записей </a> </td>

<td style="text-align: center; vertical-align: middle;"> <a rel="contact" href="mailto:info@info.ru?subject=%D0%9E%D1%82+%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D1%8B+%D0%A1%D0%9C%D0%9A">сообщение

по эл. почте </a> </td>

</tr>

</tbody>

</table>

</div>

<iframe src="blank.html" id="close" style="border: 0pt none ; height: 0pt; width: 0pt;">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;

amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;a

mp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;

amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;a

mp;amp;amp;amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;

amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;a

mp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;

amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;a

mp;amp;amp;amp;amp;amp;amp;amp;gt;

</iframe>

</body></html>

Link to comment
Share on other sites
  • 0
Veseloff Explorer

Veseloff

Posted
Posted

Код надо оформлять в специально предусмотренные для того теги.

Что касается воспроизведения видео, то тут вариантов просто масса. Я когда-то использовал ffserver и выводил поток в файл swf. Ну и на сайте его воспроизводил обчной флэшкой.

Link to comment
Share on other sites
  • 0
vfp7 Explorer

vfp7

Posted
  • Author
Posted (edited)
Код надо оформлять в специально предуспотренные для того теги.

Что касается воспроизведения видео, то тут вариантов просто масса. Я когда-то использовал ffserver и выводил поток в файл swf. Ну и на сайте его воспроизводил обчной флэшкой.

Такие варианты я тоже продумывал, но в том то и дело, что теоретически HTML5 через тэг video позволяет легко и красиво решить эту проблему.

По спецификации тэга video autoplay должно АВТОМАТИЧЕСКИ начаться воспроизведение видеопотока, а в действительности - этого не происходит.

Вручную все отрабатывает, autoplay - не работает, значит надо искать хитрый болт на 16 - java кодом с имитировать ручной запуск воспроизведения.

А вот здесь моих знаний явно не хватает.

Я думаю лучший вариант - по событию "завершение загрузки страницы" вызвать как то обработку video.play()

Описание метода play с ресурса http://w3pro.ru/article/vvedenie-v-html5-video :

Элементы <video> и <audio> являются экземплярами новых медиа-элементов HTML5 DOM, которые предоставляют мощный API, позволяя разработчикам управлять воспроизведением видео с помощью целого ряда новых методов и свойств JavaScript. Давайте взглянем на некоторые наиболее интересные из них, позволяющие создать собственный простой контроллер:

play() и pause()

Совершенно очевидно, эти методы начинают и останавливают воспроизведение видео. play() начнёт показ видео с текущей позиции воспроизведения. Когда фильм впервые загружен, этой позицией будет первый кадр ролика. Обратите внимание, что нет метода stop() — если вы хотите остановить воспроизведение и "перемотать" на начало ролика, вы должны использовать pause() и самостоятельно программно изменить текущую позицию воспроизведения.

Edited by vfp7
Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted
Почти, только используя img src мы будем использовать отображение потока в виде перегружаемых картинок, а при использовании video мы используем установленный в ОС проигрыватель, с поддержкой 2D и 3D ускорений ...
Такие варианты я тоже продумывал, но в том то и дело, что теоретически HTML5 через тэг video позволяет легко и красиво решить эту проблему.

По спецификации тэга video autoplay должно АВТОМАТИЧЕСКИ начаться воспроизведение видеопотока, а в действительности - этого не происходит.

Вручную все отрабатывает, autoplay - не работает, значит надо искать хитрый болт на 16

Камера возвращает картинки вот в чем ответ, это не видео.

Link to comment
Share on other sites
  • 0
vfp7 Explorer

vfp7

Posted
  • Author
Posted
Камера возвращает картинки вот в чем ответ, это не видео.

Это не камера, это сервер видеонаблюдения на motion под FreeBSD,

он выдает видеопоток используя ffmpeg в своем коде.

Принцип работы motion в общем случае ( можно настроить как угодно ) - собираем потоки и ( или ) картинки с камер видеонаблюдения, обрабатываем на предмет движения, если есть движение - то запись на диск, а так же одновременно выдаем в видеопотоке обработанные данные, все это использует ffmpeg.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept