Я работаю над онлайн-портфолио, которое требует пользовательского ввода для просмотра различных видео. Он отлично работает на компьютере, но теперь я работаю на мобильном телефоне и
Ниже 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>
Пытаться:
<video src = "..." controls playsinline></video>
Вот ссылка, которая должна помочь вам, если она не работает: https://css-tricks.com/what-does-playsinline-mean-in-web-video/
У меня тоже недавно была такая же проблема. Проблема заключалась в том, как определенные устройства (в основном устройства 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>
На каком устройстве и в каком браузере вы пытаетесь протестировать функцию автозапуска?
Я пытаюсь заставить его работать в сафари на айфоне. Я хочу, чтобы Friend.webm запускался автоматически, но он вообще не отображается, как и Resume.webm/Gmail/Loading. Спасибо, Карл.
Интересно, читая документы Apple dev, то, что я предложил, должно работать. Единственным исключением является то, что если устройство находится в режиме экономии заряда батареи, то видео не будет воспроизводиться автоматически. Их документация по этому вопросу находится здесь
Получил смешанный успех, но я определенно думаю, что ваш ответ в правильном направлении. Может дело в вебме? С какими устройствами у вас была такая же проблема?
К сожалению, мы можем сделать только лучшее, что можем сделать при разработке веб-сайтов. Это зависит от браузеров и того, что они делают с тем, что мы пишем :( У меня также была такая же проблема с iPhone и Safari. Использование приведенного выше фрагмента кода помогло моему клиенту, сообщившему о проблеме. Я не могу сказать хотя вы знаете, какую ОС они использовали, все, что я знаю, это то, что это был iPhone с Safari.
также закончилось добавлением <meta name = "viewport" content = "width=device-width; initial-scale=1.0; max-scale=1.0; user-scalable=0;"> из этой темы stackoverflow.com/questions /3970787/…
Помогло ли это воспроизвести видео? На странице, где я работал, у меня было следующее <meta name = "viewport" content = "width=device-width, initial-scale=1, viewport-fit=cover" />
Так было со всеми mp4, но не с webms. Я тоже попробую, может поможет. Большое спасибо, Карл!
Хм, может быть, это проблема с форматом webm. Впрочем, нет проблем, рад слышать о прогрессе :)
Спасибо @Humza, но, к сожалению, с этим не повезло.