Блог

Главная - Вопросы по программированию - Просмотр на рабочем столе разных видео и просмотр с мобильных устройств разных видео с автоматическим воспроизведением

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

#html #css

#HTML #css

Вопрос:

Разместите, помогите мне… Я постараюсь разместить видео на экране рабочего стола, а ширина и высота этого видео — 100%. любой пользователь заходит на наш сайт на рабочем столе, чтобы посмотреть это видео.

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

** Автоматическое воспроизведение видео на обоих экранах **

Место, помогите мне, как это возможно.

 **this is my code..**

<html>
<head>
<title>video</title>
</head>
<body>

<video width="100%" height="100%">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/howtorain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

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

Ответ №1:

Для воспроизведения видео на мобильных устройствах и настольных компьютерах, указав separate class

Нравится..

 <video class="desktop" controls autoplay>
  <source src="Fumefx colored smoke.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video class="mobile" controls autoplay>
  <source src="mobile.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Для использования CSS для скрытия рекламы…

 .desktop{
    width:100%;
    height:100vh;
    display:block;
}
.mobile{
    display:none;
}
@media only screen and (max-width: 600px) {
    .desktop{
        display:none;
    }
    .mobile{
        width:100%;
        height:100vh;
        display:block;
    }
}

Ответ №2:

Для автоматического воспроизведения видео добавьте в тег видео атрибут «автозапуск».

Для использования разных видео на настольных компьютерах и мобильных устройствах. Используйте другой ТЕГ видео с другим исходным файлом и используйте медиа-запрос или Java-скрипт для скрытия и отображения

 <html>
<head>
<title>video</title>
</head>
<body>

<video width="100%" height="100%" autoplay>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/howtorain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

Комментарии:

1. только HTML и CSS через дизайн просмотра. не использовать javascript.