Элементы управления видео в Video.js отображаются только с HTML5 - PullRequest
Новая
       37

Элементы управления видео в Video.js отображаются только с HTML5

0 голосов
/ 20 сентября 2019

Я использую Video.js для отображения нескольких коротких видео.Моя первая страница, которая использовала Video.js, выглядела следующим образом: 

  <video id='my-video' class='video-js' controls preload='auto' width='800' height='600' poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='example.mp4' type="video/mp4">
  </video>

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

Я начал изучать, как это сделать в Javascript, потому что я хотел иметь возможность передавать функции имя видео и иметь егоВоспроизвести это видео при нажатии на кнопку.Ниже приведен измененный HTML-код: 

  <button type="button" onclick="playit('example.mp4')">Press Me</button>
  <video id='my-video' class='video-js' width='800' height='600' poster='MY_VIDEO_POSTER.jpg'>
  </video>

Ниже приведен Javascript, который я использую для воспроизведения видео: 

var playit = function(vName) {

   var options = {
       sources: [{
          src: vName,
          type: "video/mp4"
       }],
       preload: "auto",
       controls: true,
       autoplay: true
   };

   var play = videojs("my-video",options,function onPlayerReady() {
       this.play();
   });
}

Javascript работает хорошо, но в результате воспроизводимого видео отображается только прогрессбар!Воспроизведение / пауза и отключение звука исчезли.

Что-то мне нужно установить в объекте параметров, чтобы эти элементы управления отображались?Как мне вернуть элементы управления паузой / воспроизведением и отключением звука, используя Javascript?

Также: было бы неплохо иметь реальный регулятор громкости и полноэкранный контроль.Я знаю, что они существуют в элементе управления View.js, и полноэкранный элемент управления появляется при использовании видео только в формате HTML, но из документации неясно, как заставить любой из них появляться при использовании Javascript.

Может кто-нибудь сказать мне, как сделать их доступными?

I

1 Ответ

0 голосов
/ 24 сентября 2019

В вашем первом примере выше у вас есть атрибут 'controls' в теге видео HTML5 - это то, что говорит браузеру включить элементы управления.

Это отсутствует во втором примере - то есть вы этого не делаетеиметь атрибут «controls» в теге видео HTML5.У вас есть это в Javascript, но, по моему опыту, проще всего добавить его в HTML5, а затем контролировать поведение и то, что вы делаете, и не хотите появляться через Javascript - см. Этот пример: 

let player = videojs('testVid', {
  controlBar: {
    volumePanel: {
      inline: false
    }
  }
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
</head>
<body>

<video id="testVid" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
      data-setup='{}'>
    <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type='video/mp4'>
  </video>

</body>
</html>

Стоит знать, что со временем это изменилось в video.js, но эта страница обычно обновляется (на момент написания): https://docs.videojs.com/tutorial-components.html#default-component-tree

...