Получение встроенного видео для iphone / мобильного телефона

Я работаю над онлайн-портфолио, которое требует пользовательского ввода для просмотра различных видео. Он отлично работает на компьютере, но теперь я работаю на мобильном телефоне и

  1. приглушенные веб-видео (Friend.webm, Resume.webm, Loading.webm и gmail.webm), похоже, вообще не воспроизводятся/не работают
  2. видео, которые работают, воспроизводятся в полноэкранном режиме, даже если в теге есть playsinline.

Ниже html: сайт http://yourfriendnoah.me Любая помощь приветствуется!

<html>
<html>
<head>
    <meta property = "og:image" content = "Thumnbnail.gif">
    <link rel=stylesheet type = "text/css" href = "grid.css">
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type = "text/javascript" src = "code.js"> </script>
</head>

<body style = "background-color:black" align=center>
<div class = "container">
    <img src = "Clayvision.png" width=150% height=auto>
    <div id = "load">
        <video id = "loading" width=50% height=auto muted loop>
            <source src = "Loading.webm" type = "video/webm">
        </video>
    </div>
    <div id = "video">
        <image id = "black" src = "Black.png" width=85% height=auto muted>
    </div>
    <div id = "video">
        <video id = "content" width=75% height=auto autoplay muted>
            <source src = "Friend.webm" type = "video/webm" preload = "true">
        </video>
    </div>
    <div id = "cv">
        <video id  = "resume" width=50% height=auto muted>
            <source src = "Resume.webm" type = "video/webm">
        </video>
    </div>
    <div id = "mail">
        <video id  = "gmail" width=50% height=auto muted>
            <source src = "gmail.webm" type = "video/webm">
        </video>
    </div>
    <div id = "hand">
        <video id  = "control">
            <source src = "hand1.webm" type = "video/webm">
        </video> 
    </div>
    <div id = "button1" class = "grid"></div>
    <div id = "button2" class = "grid"></div>
    <a href='mailto: [email protected]'>
        <div id = "button4" class = "grid2"></div>
    </a>
    <a href='https://docs.google.com/document/d/1E34NvJpD936OHYFO8byTiTBSl2k6mzQ-6IfT0OHSk7A/edit?usp=sharing' target = "_blank">
        <div id = "button3" class = "grid2"></div>
    </a>
</div>
</body>

</html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
1 179
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пытаться:

<video src = "..." controls playsinline></video>

Вот ссылка, которая должна помочь вам, если она не работает: https://css-tricks.com/what-does-playsinline-mean-in-web-video/

Спасибо @Humza, но, к сожалению, с этим не повезло.

Dougie Fresh 25.12.2020 23:24
Ответ принят как подходящий

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

<video preload = "true" autoplay muted loop playsinline type = "video/mp4" id = "teaser">
    <source src = "assets/images/teaser-reel.mp4" type = "video/mp4">
</video>

Итак, для вашего видео с автоматическим воспроизведением «Friend.webm» вы можете попробовать следующее

<video preload = "true" autoplay muted loop playsinline type = "video/webm">
    <source src = "Friend.webm" type = "video/webm">
</video>

Я попытался обновить до (просто потому, что я не был уверен, должно ли это быть на уровне источника или на уровне видео, но, похоже, пока безуспешно): <video preload = "true" id = "loading" width=50% height =auto autoplay muted loop playsinline> <source src = "Loading.webm" type = "video/webm" preload = "true" autoplay muted loop playsinline> </video>

Dougie Fresh 25.12.2020 23:46

На каком устройстве и в каком браузере вы пытаетесь протестировать функцию автозапуска?

Karl Withers 25.12.2020 23:49

Я пытаюсь заставить его работать в сафари на айфоне. Я хочу, чтобы Friend.webm запускался автоматически, но он вообще не отображается, как и Resume.webm/Gmail/Loading. Спасибо, Карл.

Dougie Fresh 25.12.2020 23:52

Интересно, читая документы Apple dev, то, что я предложил, должно работать. Единственным исключением является то, что если устройство находится в режиме экономии заряда батареи, то видео не будет воспроизводиться автоматически. Их документация по этому вопросу находится здесь

Karl Withers 25.12.2020 23:59

Получил смешанный успех, но я определенно думаю, что ваш ответ в правильном направлении. Может дело в вебме? С какими устройствами у вас была такая же проблема?

Dougie Fresh 26.12.2020 00:06

К сожалению, мы можем сделать только лучшее, что можем сделать при разработке веб-сайтов. Это зависит от браузеров и того, что они делают с тем, что мы пишем :( У меня также была такая же проблема с iPhone и Safari. Использование приведенного выше фрагмента кода помогло моему клиенту, сообщившему о проблеме. Я не могу сказать хотя вы знаете, какую ОС они использовали, все, что я знаю, это то, что это был iPhone с Safari.

Karl Withers 26.12.2020 00:11

также закончилось добавлением <meta name = "viewport" content = "width=device-width; initial-scale=1.0; max-scale=1.0; user-scalable=0;"> из этой темы stackoverflow.com/questions /3970787/…

Dougie Fresh 26.12.2020 00:12

Помогло ли это воспроизвести видео? На странице, где я работал, у меня было следующее <meta name = "viewport" content = "width=device-width, initial-scale=1, viewport-fit=cover" />

Karl Withers 26.12.2020 00:17

Так было со всеми mp4, но не с webms. Я тоже попробую, может поможет. Большое спасибо, Карл!

Dougie Fresh 26.12.2020 00:31

Хм, может быть, это проблема с форматом webm. Впрочем, нет проблем, рад слышать о прогрессе :)

Karl Withers 26.12.2020 00:36

Другие вопросы по теме