Как сделать автозапуск видео на мобильных устройствах?

@eun · Регистрация: 27.01.2013

Author24 — интернет-сервис помощи студентам

Столкнулся с тем, что автозапускается видео только на ноутбуке. Как сделать, чтобы и на мобильных устройствах срабатывал автозапуск видео при загрузке страницы? Ну или хотя бы можно было нажать кнопку проигрывания?

Комментарий модератора

Один вопрос - одна отдельная тема!

Добавлено через 15 часов 41 минуту
С кнопкой проигрывания разобрался (код ниже), а вот автозапуск не работает...

HTML5

1
2
3

<video autoplay controls>
    <source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1">
</video>

@Qwerty_Wasd · 19.11.2016, 12:01

http://htmlbook.ru/html5/video - почитайте там есть простой скрипт для мобил

Добавлено через 18 секунд

PHP/HTML

<script>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </script>

@eun · 19.11.2016, 12:40 **[ТС]**

Спасибо за код - добавил его в js своего сайта, но не работают варианты:

HTML5

1
2
3

<video id="movie" autoplay controls>
    <source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1">
</video>

HTML5

1
2
3

<video id="movie" autoplay loop muted>
    <source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1">
</video>

Не стартует видео даже на ноутбуке:

HTML5

1
2
3

<video id="movie" loop muted>
    <source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1">
</video>

@Qwerty_Wasd · 20.11.2016, 03:01

Пробуйте форматы, которые подходят для конкретного браузера
MP4 - для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7
WebM/VP8 - для Firefox4, Opera, и Chrome
Ogg/Vorbis - для старых версий браузеров Firefox и Opera
Для устаревших версий вообще придется оборачивать в

HTML5

1	<object></object>

У вас будет много возни с видео...

Добавлено через 5 минут
Плюс еще смотря какая кодировка у контейнера, например у MP4 - кодек должен быть h.264.

Добавлено через 3 минуты
Почитайте здесь... Только обязательно. А то видимо прошлую ссылку вы проигнорили, по какой-то причине. Или не читали все...

Добавлено через 3 минуты
Этот вариант--

HTML5

1
2
3

<video id="movie" loop muted>
    <source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1">
</video>

---Видео с идентификатором movie зациклить без звука. Путь такой-то... А кто его ЗАПУСТИЛ?

@eun · 20.11.2016, 07:39 **[ТС]**

Сообщение от Qwerty_Wasd

Пробуйте форматы, которые подходят для конкретного браузера
MP4 - для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7
WebM/VP8 - для Firefox4, Opera, и Chrome
Ogg/Vorbis - для старых версий браузеров Firefox и Opera
Для устаревших версий вообще придется оборачивать в
<object></object>
У вас будет много возни с видео...

Это всё прогуглил, но спасибо, так сказать для уверенности, что думаю правильно...

Сообщение от Qwerty_Wasd

Плюс еще смотря какая кодировка у контейнера, например у MP4 - кодек должен быть h.264.

Вот тут не понятно: чем именно дополнить код, чтобы учитывалась кодировка контейнера? Неужели благодаря этому заработает автозапуск на мобильных устройствах?

Сообщение от Qwerty_Wasd

Почитайте здесь... Только обязательно. А то видимо прошлую ссылку вы проигнорили, по какой-то причине. Или не читали все...

Не игнорировал... В той, а также и в этой статье не нашёл решения проблемы автозапуска, тем не менее спасибо, особенно за вторую ссылку - в моих гуглопоисках она не попадалась...

Сообщение от Qwerty_Wasd

Этот вариант--
<video id="movie" loop muted>
<source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1">
</video>
---Видео с идентификатором movie зациклить без звука. Путь такой-то... А кто его ЗАПУСТИЛ?

Касательно вопроса - казалось бы должен запускать autoplay, но по-прежнему не запускает ни так, ни эдак:

HTML5

1 2	<video id="movie" width="100%" height="auto" autoplay loop muted> <source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1" type="video/mp4">

HTML5

1
2
3

<video id="movie" width="100%" height="auto" autoplay="autoplay" loop muted>
<source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1" type="video/mp4">
</video>

@Qwerty_Wasd · 20.11.2016, 10:20

Вы знаете - я не вижу весь ваш код и нет доступа к структуре вашего сайта, чтобы можно было понять в чем трабл. Подойдите к проблеме с другой стороны. Представим, что вы создали ее. Возьмите тогда для примера себе человека, у которого ее нет. А именно: , берете сайт с нужным вам функционалом и через инструменты разработчика(CTRL+SHIFT+I) парсите его решение. Тупо копипаст с заменой в ключевых позициях. И последняя мысль, которая у меня возникла - вы скрипты как подключаете к странице? На всякий случай уберите их в самый низ кода. Чтобы в потоке они выполнялись после загрузки контента. Исключая, естественно, решения для объектов.

@Qwerty_Wasd · 20.11.2016, 11:27

Вот вам пример состряпал. Работает во всех браузерах - проверил лично. Конвертировал в те форматы, что нужны клиентам(браузерам).

@Qwerty_Wasd · 20.11.2016, 11:36

Да чуть не забыл - допишите сами атрибуты элементу

HTML5

video

какие нужны.

@eun · 20.11.2016, 11:45 **[ТС]**

Спасибо большое за помощь - отпишусь по результатам.

@Qwerty_Wasd · 20.11.2016, 11:47

Ок.

@eun · 20.11.2016, 11:48 **[ТС]**

Один кусок js у меня действительно грузится в самом начале страницы...

@Qwerty_Wasd · 20.11.2016, 11:51

Дам совет - прошу извинить, если навязываю - научитесь тестить модульно свой код. Тогда локация ошибки будет точно определена. Это сильно сократит время и расход нервов.

@eun · 20.11.2016, 13:43 **[ТС]**

Совет "намотал на ус", а именно:
используя файлы test.html и reset.css из архива поста#7 данной темы, изменил/дополнил только в test.html следующий код:

PHP/HTML

<video id=movie controls autoplay loop muted width=640 height=360>
<source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
  <script>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </script>

PHP/HTML

<div style="position: relative; width: 640px;">
<video id=movie controls autoplay loop muted width=640 height=360>
<source src="http://ecosafetycode.ru/video.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
  <script>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </script>

Результат прежний - в обоих случаях видео, после загрузки страницы, не начинает само проигрываться, т.е. требуется нажатие кнопки воспроизведения...
Неужели у вас автозапсукается видео в Safari?

@Qwerty_Wasd · 20.11.2016, 14:52

1.

Сообщение от eun

Неужели у вас автозапсукается видео в Safari?

- да и на смартах тоже.

2.

PHP/HTML

<video id=movie controls autoplay loop muted width=640 height=360>
<source src="https://www.dropbox.com/s/4ao1u036co5ox0a/video.mp4?raw=1" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
  <script>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </script>

- название идентификатора берется в кавычки

HTML5

1	id="movie"

3. Проверьте ваш код на наличие ошибок. Скорее всего вы где-то неправильно(семантически) составили конструкцию. Пример из пункта 2.

Добавлено через 6 минут

Сообщение от Qwerty_Wasd

- конечный файл

Сообщение от Qwerty_Wasd

video.mp4

, а не

Сообщение от Qwerty_Wasd

video.mp4?raw=1

.

Добавлено через 3 минуты
И самое главное вы так и не поняли, даже после явного примера что я вам предоставил. ДЛЯ КАЖДОГО ДВИЖКА(это я про браузеры) СВОЕ ПРАВИЛО РАБОТЫ С ВИДЕО\АУДИО ПОТОКОМ. Поднимитесь в пост выше и перечитайте снова!

@eun · 20.11.2016, 15:03 **[ТС]**

Сообщение от Qwerty_Wasd

- название идентификатора берется в кавычки
HTML5
Выделить код
1
id="movie"

Брал и в кавычки - безрезультатно...

Сообщение от Qwerty_Wasd

- конечный файл
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
video.mp4
, а не
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
video.mp4?raw=1

Специально в посту #13 приводил оба варианта кода, указывая отсутствие разницы. А через dropbox без raw=1 файлы картинок/видео не воспроизводятся.

Сообщение от Qwerty_Wasd

3. Проверьте ваш код на наличие ошибок. Скорее всего вы где-то неправильно(семантически) составили конструкцию.

Всё что Вами рекомендовано - воплощено! Уже и не знаю что тут в этом простом коде проверять, ещё раз:

PHP/HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Видео</title>
<link rel="stylesheet" href="css/reset.css">
</head>
 
<body>
<div style="position: relative; width: 640px;">
<video id="movie" controls autoplay loop muted width=640 height=360>
<source src="http://ecosafetycode.ru/video.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
  <script>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </script>
<a style="font-family: 'Arial'; font-size: 11px; text-decoration: none; position: absolute; color:blue; top: 6px; left: 6px; z-index: 9999;border-style: none; display:block; line-height:8px" href="http://...">#TEXTLINK#</a>
</div>
</body>
</html>

@Qwerty_Wasd · 20.11.2016, 15:14

такой вопрос - вы пробовали запустить тот код что я прислал, не модифицируя его?

@Fedor92 · 20.11.2016, 15:19

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

@Qwerty_Wasd · 20.11.2016, 15:22

Не то чтобы запретили) Не реализовали.

Добавлено через 1 минуту
Иначе никакие танцы с бубном не помогли бы. Не то что JS велосипеды)

@eun · 20.11.2016, 15:26 **[ТС]**

Сообщение от Qwerty_Wasd

такой вопрос - вы пробовали запустить тот код что я прислал, не модифицируя его?

Да, вообще не воспроизводит - даже на ноутбуке!

@Qwerty_Wasd · 20.11.2016, 15:27

Fedor92, поможете советом? У меня уже мысли кончились, чем помочь. У меня все пашет. Пытась понять как наговнокодить, чтобы был тот же трабл, что и у ТС. Пока не придумал.

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	20.11.2016, 15:19	17
	А разве разработчики мобильных платформ не запретили автоматическое воспроизведение видео в целях экономии трафика? 0

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2016, 10:20	6
	Вы знаете - я не вижу весь ваш код и нет доступа к структуре вашего сайта, чтобы можно было понять в чем трабл. Подойдите к проблеме с другой стороны. Представим, что вы создали ее. Возьмите тогда для примера себе человека, у которого ее нет. А именно: , берете сайт с нужным вам функционалом и через инструменты разработчика(CTRL+SHIFT+I) парсите его решение. Тупо копипаст с заменой в ключевых позициях. И последняя мысль, которая у меня возникла - вы скрипты как подключаете к странице? На всякий случай уберите их в самый низ кода. Чтобы в потоке они выполнялись после загрузки контента. Исключая, естественно, решения для объектов. 1

@eun 2 / 2 / 0 Регистрация: 27.01.2013 Сообщений: 106
	20.11.2016, 11:45 [ТС]	9
	Спасибо большое за помощь - отпишусь по результатам. 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2016, 11:47	10
	Ок. 0

@eun 2 / 2 / 0 Регистрация: 27.01.2013 Сообщений: 106
	20.11.2016, 11:48 [ТС]	11
	Один кусок js у меня действительно грузится в самом начале страницы... 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2016, 11:51	12
	Дам совет - прошу извинить, если навязываю - научитесь тестить модульно свой код. Тогда локация ошибки будет точно определена. Это сильно сократит время и расход нервов. 1

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2016, 15:14	16
	такой вопрос - вы пробовали запустить тот код что я прислал, не модифицируя его? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2016, 15:22	18
	Не то чтобы запретили) Не реализовали. Добавлено через 1 минуту Иначе никакие танцы с бубном не помогли бы. Не то что JS велосипеды) 0

@eun 2 / 2 / 0 Регистрация: 27.01.2013 Сообщений: 106
	20.11.2016, 15:26 [ТС]	19
	Сообщение от Qwerty_Wasd такой вопрос - вы пробовали запустить тот код что я прислал, не модифицируя его? Да, вообще не воспроизводит - даже на ноутбуке! 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2016, 15:27	20
	Fedor92, поможете советом? У меня уже мысли кончились, чем помочь. У меня все пашет. Пытась понять как наговнокодить, чтобы был тот же трабл, что и у ТС. Пока не придумал. 0