Приглушенный тег видео, если он удален, не будет воспроизводиться - PullRequest
Новая
       1

Приглушенный тег видео, если он удален, не будет воспроизводиться

0 голосов
/ 25 марта 2020

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

Я попытался найти все коды слова «отключен» и "тихо" ничего не работает. Не найдено. Бэм.

Кто-нибудь, помогите мне, пожалуйста. 

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

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

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
</style>
</head>

<body>
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
   document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>
</body>
</html>

Спасибо

Ответы [ 4 ]

0 голосов
/ 26 марта 2020

Для автоматического воспроизведения видео в Интернете необходимо включить атрибут muted.

Это верно для Chrome и Safari уже несколько лет: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Если вы хотите иметь возможность запускать / останавливать движение ie, вы можете рассмотреть возможность добавления атрибута элементов управления: 

<video autoplay muted loop controls id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Наконец, если вы решите продолжить приглушенное видео - возможно, вы захотите добавить подписи для дополнительного вовлечения. Прочитайте здесь для получения дополнительной информации: https://apivideo.github.io/2020/03/06/@api.video-how-to-add-captions-to-your-videos-19eba225a4f8.html

Дуг

Отношения с разработчиками

api.video

0 голосов
/ 25 марта 2020

Мне не удалось воспроизвести проблему, но вы можете попробовать это исправление, используя onloadeddata: 

<video id="myVideo" onloadeddata="this.play();" loop>
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

DEMO: 

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
<video id="myVideo" onloadeddata="this.play();" loop>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<br/><br/>
<button id="myBtn" onclick="myFunction()">Pause</button>
0 голосов
/ 25 марта 2020

вот ваш полный отредактированный код в качестве ответа.

мои изменения: <video controls autoplay id="myVideo">

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial;
            font-size: 17px;
        }

        #myVideo {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
        }

        .content {
            position: fixed;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #f1f1f1;
            width: 100%;
            padding: 20px;
        }

        #myBtn {
            width: 200px;
            font-size: 18px;
            padding: 10px;
            border: none;
            background: #000;
            color: #fff;
            cursor: pointer;
        }

        #myBtn:hover {
            background: #ddd;
            color: black;
        }
    </style>
</head>

<body>
    <video controls autoplay id="myVideo">
        <source src="rain.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>

    <div class="content">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis
            neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine
            molestiae, ad mutat oblique delicatissimi pro.</p>
        <button id="myBtn" onclick="myFunction()">Pause</button>
    </div>

    <script>
        document.addEventListener('click', musicPlay);
        function musicPlay() {
            document.getElementById('ID').play();
            document.removeEventListener('click', musicPlay);
        }
        var video = document.getElementById("myVideo");
        var btn = document.getElementById("myBtn");

        function myFunction() {
            if (video.paused) {
                video.play();
                btn.innerHTML = "Pause";
            }
            else {
                video.pause();
                btn.innerHTML = "Play";
            }
        }
    </script>
</body>

</html>
0 голосов
/ 25 марта 2020

Вы просто play/pause видео. его неактивное отключение control.use video.muted dom api 

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
    btn.innerHTML = video.muted ? "Unmute":'Mute';
    video.muted = !video.muted;
}
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
    pro.
  </p>
  <button id="myBtn" onclick="myFunction()">Unmute</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...