Вы можете легко начать трансляцию собственного видео, используя только один тег в HTML5. Я говорю о теге <video>. Он встраивает в документ полноценный медиаплеер и, подобно тегу img, принимает путь к медиафайлу, который мы хотим воспроизвести, внутри атрибута src, а также принимает параметры для width и height.

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

Чтобы обработать случай, когда браузеры не поддерживают тег video, вы можете предоставить резервный контент внутри тегов <video></video>.

‹iframe src="https://codesandbox.io/embed/fast-rgb-03tbl5?fontsize=14&hidenavigation=1&theme=dark style="width:100%; высота: 500 пикселей; граница:0; радиус границы: 4px; переполнение: скрыто;” title="fast-rgb-03tbl5 allow="акселерометр; датчик освещенности; камера; зашифрованные носители; геолокация; гироскоп; спрятался; микрофон; миди; оплата; USB; вр; xr-spatial-tracking” sandbox=”allow-forms, allow-modals, allow-popups, allow-presentation, allow-same-origin, allow-scripts”

Сочетание с JavaScript

Вы также можете комбинировать эту простую потоковую передачу видео в формате HTML с JavaScript, сделать ее более профессиональной и иметь возможность управлять потоковой передачей вручную. Когда вы получаете элемент из DOM тега video, объект, который вы получаете, предоставляет различные методы и атрибуты, которые можно использовать для управления медиа-контентом. Во-первых, нам нужно получить доступ к DOM и объявить объект, который будет использоваться для наших манипуляций. Теперь мы можем использовать myVideo для программной паузы, изменения скорости воспроизведения и текущего времени видео.

const myVideo = document.getElementById("#video1");

//pause the video myVideo.pause();

//Change the speed of playback myVideo.playbackRate = 3.0;

//Change current time myVideo.currentTime = 4;

Однако большинство видео, которые мы видим сегодня в Интернете, таких как YouTube, Twitch или любые другие социальные сети, демонстрируют гораздо более сложное поведение, чем просто изменение скорости воспроизведения или приостановка видео. На YouTube вы можете изменить качество своего видео, добавить субтитры или даже добавить такие функции, как автовоспроизведение, если у вас есть несколько других видео в очереди и вы не хотите переключать их вручную.

Все эти сервисы на самом деле все еще используют тег видео. Но вместо потоковой передачи видеофайла через атрибут src внутри вашего тега они используют мощные инструменты, такие как Расширения источников мультимедиа или другой API адаптивной потоковой передачи, которые помогут более эффективно передавать ваше видео.

Что такое расширения источника мультимедиа (MSE)

Media Source Extensions — это спецификация W3C, которая позволяет JavaScript отправлять потоки в медиакодеки в веб-браузерах, которые поддерживают видео и аудио HTML5, реализуемые сегодня большинством браузеров. Другими словами, он позволяет JavaScript генерировать потоки и облегчать различные варианты использования, такие как адаптивная потоковая передача и прямые трансляции со сдвигом во времени. Это довольно продвинутое решение, если вы хотите сделать воспроизведение видео более настраиваемым и профессиональным. MSE дает нам более точный контроль над тем, сколько и как часто извлекается контент, а также некоторый контроль над деталями использования памяти, например, когда буферы вытесняются.

Оберните свой ресурс через API Media Source Extensions вместо того, чтобы иметь дело с URL-адресом напрямую (мы поговорим об этом подробнее чуть позже).

Эта спецификация была разработана со следующими целями:

  • Разрешить JavaScript создавать медиапоток независимо от способа извлечения медиафайлов.
  • Максимально используйте кеш браузера.
  • Предоставьте требования к спецификациям формата потока байтов.
  • Сведите к минимуму необходимость анализа мультимедиа в JavaScript.

Как я уже упоминал, мы по-прежнему используем теги видео HTML5, и еще более удивительным является то, что мы по-прежнему будем использовать атрибут «src». Только на этот раз вместо добавления ссылки на видео добавьте ссылку на объект MediaSource.

Если вы немного запутались, то не волнуйтесь, я все объясню. Чтобы включить этот тип использования, W3C определил статический метод URL.createObjectURL. Вы можете использовать этот API для создания URL-адреса, который напрямую указывает на объект JavaScript, созданный на клиенте, а не на онлайн-ресурс.

Вы можете увидеть, как это работает в этом примере:

const videoTag = document.getElementById("my-video");
// creating the MediaSource, just with the "new" keyword, and the URL for it
const myMediaSource = new MediaSource();
const url = URL.createObjectURL(myMediaSource);
// attaching the MediaSource to the video tag
videoTag.src = url;
Now that you have a MediaSource, what should you do? That's not the only MSE specification. It also defines another concept, Source Buffers.
Source Buffers
The SourceBuffer interface represents a chunk of media to be passed into an HTMLMediaElement and played via a MediaSource object. To put the video directly into the MediaSource for playback, you’ll need Source Buffers. MediaSource contains one or more instances of it. Each is associated with a content type, such as Audio, Video, or both of them at the same time. Source buffers are all associated with a single MediaSource and are used in JavaScript to add video data directly to HTML5 video tags. Separating video and audio allows managing them separately on the server. Doing so has several advantages such as control over your traffic and increasing performance. This is how it works:
// -- Create a MediaSource and attach it to the video (We already learned about that) --
const videoTag = document.getElementById("my-video");
const myMediaSource = new MediaSource();
const url = URL.createObjectURL(myMediaSource);
videoTag.src = url;
// 1. add source buffers
const audioSourceBuffer = myMediaSource
.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
const videoSourceBuffer = myMediaSource
.addSourceBuffer('video/mp4; codecs="avc1.64001e"');
// 2. download and add our audio/video to the SourceBuffers
// for the audio SourceBuffer
fetch("<http://server.com/audio.mp4>").then(function(response) {
// The data has to be a JavaScript ArrayBuffer
return response.arrayBuffer();
}).then(function(audioData) {
audioSourceBuffer.appendBuffer(audioData);
});
// the same for the video SourceBuffer
fetch("<http://server.com/video.mp4>").then(function(response) {
// The data has to be a JavaScript ArrayBuffer
return response.arrayBuffer();
}).then(function(videoData) {
videoSourceBuffer.appendBuffer(videoData);
});
Adaptive Streaming
Many video players have an "auto quality" feature that automatically selects quality based on network speed. If you have a slow internet connection then you’ll end up watching a video in the lowest resolution (probably 360p or even lower), on the other hand, if the connection is good then the video will be in the highest resolution (probably 1080p or even higher). It depends on how many options the specific video has. In addition, your hardware capability is also taken into account.

On the server side, we create different segments for every quality we want to support. For example, we would put the following files on our server:
./video/
├── ./360p/
|     ├── video_0.mp4
|     ├── video_1.mp4
|     └── video_2.mp4
├── ./720p/
|     ├── video_0.mp4
|     ├── video_1.mp4
|     └── video_2.mp4
└── ./1080p/
├── video_0.mp4
├── video_1.mp4
└── video_2.mp4
The web player then automatically selects the correct video file to load when the network or CPU state changes. This is entirely done in JavaScript. For video segments, it could, for example, look as follows:
/**
  • Сначала мы получаем желаемое качество из пропускной способности
  • Затем передайте его в pushVideoSegment()
  • который по очереди выбирает каждый сегмент с желаемым качеством и возвращает обещание **/
function pushVideoSegment(nb, wantedQuality) {
const url = "<http://my-server/video/>" +
wantedQuality + "/segment" + nb + ".mp4");
return fetch(url)
.then((response) => response.arrayBuffer());
.then(function(arrayBuffer) {
videoSourceBuffer.appendBuffer(arrayBuffer);
});
}
/**
  • Преобразование предполагаемой пропускной способности в правильный звук
  • качество, как определено на стороне сервера.
  • @param {число} пропускная способность
  • @returns {string} */ function fromBandwidthToQuality(bandwidth) { возвращает пропускную способность › 320e3 ? «360p» : «720p»; }
// first estimate the bandwidth. Most often, this is based on
// the time it took to download the last segments
const bandwidth = estimateBandwidth();
const quality = fromBandwidthToQuality(bandwidth);
pushVideoSegment(0, quality)
.then(() => pushVideoSegment(1, quality))
.then(() => pushVideoSegment(2, quality));
Conclusion
Congratulations, you’ve learned multiple ways how to stream a video file into your browser. We have explored several tools that are helping you not just change some video parameters by using vanilla JS and HTML, and also Media Source Extensions (MSE) that are helping all developers around the world to build professional web players which you’re using yourself, such as YouTube, Twitch, TikTok and many others.
If you want to give your users the ability to also edit videos within your mobile application check out our VideoEditor SDK offering features such as trimming, transforms, video composition and more. It’s fully customizable to match the look and feel of your app and the most performant solution on the market.
If you have questions, feedback or comments reach out to us on Twitter.