Html video tag

Vimuse : jQuery HTML5 Media Player

June 1, 2014
|
HTML5, jSON, Plugins, Premium, Responsive, Video & Audio

Vimuse HTML5 Media Player is a jQuery plugin that allows you to play both audio and video in a modern and sleek interface. You can choose to play your own audio/video files or videos from Youtube/Vimeo or even Shoutcast streams. The player features a fluid responsive design and can fit in any screen size ranging from mobile phones to desktop browsers. The player is also optimized for retina and touch screens and provides the feel of a native app.

Features:

  • Play video and audio files.
  • HTML5 playback with Flash/Silverlight fallback.
  • Playlist data is passed through JSON.
  • Special layout for audio-only mode.
  • Play videos from Youtube/Vimeo.
  • Pull videos from Youtube user, playlist or search query.
  • Pull videos from Vimeo user, album or channel.
  • Play Shoutcast streams and show track info and cover-art.
  • Extract audio info from ID3 tags – cover, track, artist, album.
  • Build playlist by scanning folder for mp3 files.
  • Several layout options.
  • Player API functions and events.
  • Mobile, retina and touch screen optimized

Описание

HTML тег <video> позволяет добавить на страницу видеофайл. Некоторые браузеры не поддерживают видеофайлы некоторых форматов, поэтому необходимо предоставить видеофайл в нескольких форматах одновременно, для этого используются теги <source>, которые должны располагаться внутри элемента <video>.

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

Примечание: атрибутам controls, autoplay и loop при использовании не обязательно должны быть присвоены значения, эти атрибуты являются атрибутами булева типа, то есть если атрибут указан, то данная функция считается включенной, если не указан — выключенной.

Форматы видеофайлов

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

Наиболее распространенные форматы вам, вероятнее всего, известны. Это avi, asf, mov, mp4 (MPEG4), ogg и другие.

Начнем с AVI (Audio-Video Interleaved). Этот формат был разработан корпорацией Microsoft и представляет собой контейнер, в который можно вложить видео, сжатое любым стандартом. Храниться может как один поток (например, только аудио или только видео), так и несколько.

Правда существует ограничение: звуковых дорожек может быть много, а вот видеодорожка только одна. Думаю, с разбором avi проблем не возникнет, так как у каждого на компьютере есть фильм или клип с расширением .avi.

ASF разработан все той же корпорацией Microsoft и работает с потоковыми документами типа видео и аудио. Преимущество ASF состоит в том, что он не требует от вас установки определенных кодеков. Таким образом, он указывает структуру потока переносимых данных, но не ограничивает в выборе метода кодирования видеоинформации. Может иметь расширения: .asf, .wma и .wmv.

Контейнер MOV был разработан второй большой мировой корпорацией Apple специально для их приложения QuickTime. Хоть формат и рассчитан на операционную систему Mac OS X, он отлично воспроизводится и в Windows.

Контейнер чрезвычайно удобен для редактирования лежащих в нем файлов, а также может в себе хранить не только несколько дорожек аудио- и видеоинформации, а еще и субтитры, панорамы и анимации. Среди расширений можно встретить .QT или .MOV.

Mp4 – очень известный формат хранения видеофайлов. На самом деле это сокращение от названия стандарта сжатия – MPEG4. Это фильм или клип, который по своим возможностям не уступает предыдущему формату MOV.

И наконец ogg. Данный формат является универсальным, бесплатным и доступным для всех желающих. Этот мультимедийный контейнер был разработан некоммерческой компанией Xiph.Org Foundation. Формат функционирует с различными кодеками и может хранить в себе любые виды мультимедиа. Расширение таких файлов выглядит .ogg.

О YouTube, поделись ссылочкой

Через сервис YouTube при помощи ссылки можно загрузить как уже имеющиеся видео, так и свое собственное. Если же вы добавляете на свой веб-сайт персональное видео и хотите, чтоб оно передавалось через ссылку с ютуба, то для начала по инструкции загрузите видео ресурс на сервис.

Далее действия одинаковые:

  1. Переходите на вкладку с выбранным клипом или фильмом;
  2. Под ним нажимаете кнопку «Поделиться»;
  3. Выбираете способ «HTML-код»;
  4. Копируем сгенерированный текст.

Разработчики сервиса предоставляют вам код html с уже встроенной ссылкой и тегом iframe.

Вернемся к нашей программе. Скопированный текст вставляем разу после первого заголовка. Эту часть кода я прикрепил ниже:

Теперь если вы обновите вкладку с примером (можно при помощи клавиши F5), то увидите под первым заголовком вставленное видео.

Интеграция доступности

Пользователи с вестибулярными расстройствами могут быть дезориентированы. Особенно при попытке прочитать текст, размещенный поверх движущегося изображения. А люди с аутистическими расстройствами могут быть обеспокоены быстрыми изменениями. Поэтому кнопка паузы должна быть расположена в пределах досягаемости:

<button id="vidpause">Pause</button>

Для браузеров, в которых включен параметр доступности Prefers Reduced Motion (в настоящее время Safari 10.1), добавьте скрипт в нижнюю часть страницы:

var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("vidpause");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

По умолчанию для этих пользователей видео будет приостановлено.

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

function vidFade() {
    vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
    // используется только, если "цикл" отключен 
     vid.pause();
	// чтобы охватить IE10
	vidFade();
});
pauseButton.addEventListener("click", function() {
    vid.classList.toggle("stopfade");
	if (vid.paused) {
vid.play();
		pauseButton.innerHTML = "Pause";
	} else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
	}
})

JavaScript добавляет несколько строк кода CSS (для простоты префиксы поставщиков не указаны):

video#bgvid {
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

Также нужно написать CSS для скрытия кнопки на мобильных устройствах. Иначе она будет отображаться на iPhone с iOS 9 или ниже.

Учимся добавлять на веб-ресурс видео

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

Итак, я научу вас вставлять видеодокументы тремя способами:

  • используя ссылку с YouTube;
  • загружая клипы с локального компьютера;
  • пользуясь стандартными механизмами html5.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Вставка видео из разных источников</title>
    <style>
		body {
		background:#FFFAF0; 
		color:#A52A2A;
		width:100%;
		margin:0;
		text-align:center;
		}
		h1{ 
		font-style: oblique;
		text-decoration: underline;
		}
	</style>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Способ 1: добавление видео с веб-сервиса YouTube</h1>
	<h1>Способ 2: добавление видео с помощью плеера</h1>
	<h1>Способ 3: добавление видео при помощи тегов html5</h1>
  </body>
</html>

Сохраните заготовку программы. При запуске файла в окне браузера откроется веб-страница с тремя стилизованными заголовками.

7 Slider : jQuery Responsive Image Slider

October 27, 2013
|
CSS2 / CSS3.0, Plugins, Premium, Responsive, Slider

7 Slider is one of the most complete image slider ever. It is built in latest jQuery and mobile compatible so anyone can easily use it without any restriction. And it is fully responsive and modern features like Video embed,Lightbox are supported which make it more stunning.

Features:

  • 250+ wonderful animations(2d,3d) – Animations will come more as new version released.
  • Native browser support
  • Html5/Css3 transitions support – It uses html5/css3 transition for modern browsers.
  • Image Overall Loading – 7 Slider loads all images at once so that he/she doesn’t wait again while slides.
  • Image Preview support – 7 Slider provides image preview option on hover.
  • Customizable width and height – Width and height can be set.
  • Fully responsive – It’s fully responsive so it can be attached in touch device.
  • Full width functionality involved – Full width slider is available
  • Lightbox support – It supports lightbox based on users’ demand.
  • Touch device support – Touch events are supported.
  • Mouse swipe navigation support – Swipe functionality is available so users feel comfortable to navigate.
  • Video content support(Youtube,Vimeo) – Embeded videos are supported.

Атрибуты

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

<video autoplay>
<video autoplay="autoplay">
<video autoplay="">

Пример »

controls:
Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии). Значения для логического атрибута controls можно задавать следующими способами:

<video controls>
<video controls="controls">
<video controls="">

Пример »

height:
Устанавливает высоту видеоплеера в пикселях (пример: height=»200″).
Пример »
loop:
Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения). Значения для логического атрибута loop можно задавать следующими способами:

<video loop>
<video loop="loop">
<video loop="">

Пример »

muted:
Позволяет отключить звук, чтобы по умолчанию видео воспроизводилось беззвучно, при желании пользователь сможет включить звук самостоятельно. Возможные значения логического атрибута muted:

<video muted>
<video muted="muted">
<video muted="">

Пример »

Примечание: атрибут muted не поддерживается в IE9 и более ранних версиях.

poster:
Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.
Пример »
preload:
Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:

  • auto — загрузка видеофайла начнется после загрузки страницы
  • metadata — сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
  • none — загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение

Пример »

Примечание: атрибут preload не поддерживается браузером Internet Explorer.

src:
Определяет путь к нужному видеофайлу (путь может быть либо либо ).
Пример »
width:
Устанавливает ширину видеоплеера в пикселях (пример: width=»200″).
Пример »

Тег <video> так же поддерживает Глобальные атрибуты и События

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Insert videos from Youtube using the tag¶

The easiest way to play videos in HTML, is using YouTube as a source. First, you need to upload the video to YouTube or copy the embed code of an existing video, which will be inserted in the <iframe> element in your web page.

To have the embed link of the YouTube video, follow these simple steps:

  1. Open the video on YouTube and click the share button.
  2. Open the Embed code.
  3. Copy the Source link.

As you copy the embed link you can insert it into your HTML document as the src of your <iframe> element. Also, define the width and height for your video. Now, let’s see how it will look like.

Example of inserting a video from Youtube using the <iframe> tag:

Royal Video Player with HTML5 & JavaScript

April 18, 2014
|
Core Java Script, HTML5, Premium, Responsive, Video & Audio

Royal Video Player is a powerful responsive video player that can play local videos, streaming videos from a server or Youtube videos. It only requires the mp4 format (the best and most used format on the web) and it will work on mobile devices and desktop machines no matter which browser is used including older browsers like IE7/IE8, this is made possible by incorporating four video engines into the Royal Video Player, basically it has built-in a HTML5 Youtube video engine, normal video engine, flash Youtube video engine and flash normal video engine. Royal Video Player supports unlimited playlists and each playlist can have unlimited videos. The playlists can be loaded from a simple HTML markup, XML file, video folder or youtube playlist.

Управление цифровыми правами (зашифрованные мультимедийные расширения)

HTML поддерживает управление цифровыми правами (DRM, ограничение использования контента) через HTML5 Encrypted Media Extensions (EME). Добавление DRM вызывает споры, потому что оно позволяет ограничить свободу пользователей использовать носители, ограниченные DRM, даже если добросовестное использование дает пользователям законное право на это. Главный аргумент в одобрении W3C EME заключался в том, что видеоконтент в противном случае доставлялся бы в плагинах и приложениях, а не в веб-браузере.

В 2013 году Netflix добавила поддержку видео HTML5 с использованием EME, помимо старого метода доставки с использованием плагина Silverlight (также с DRM).

Easy Video Player with JavaScript & Html5

March 17, 2014
|
Core Java Script, HTML5, Premium, Responsive, Video & Audio

Easy Video Player is a powerful responsive video player that can play local videos, streaming videos from a server or Youtube videos. It only requires the mp4 format (the best and most used format on the web) and it will work on mobile devices and desktop machines no matter which browser is used including older browsers like IE7/IE8, this is made possible by incorporating four video engines into the Easy Video Player, basically it has built-in a HTML5 Youtube video engine, normal video engine, flash Youtube video engine and flash normal video engine. Packed with a huge amount of features like responsive layout, multiple instances manager, flexible skin, facebook share etc

Примеры элементов

Следующий фрагмент кода HTML5 встроит видео WebM в веб-страницу.

<video src="movie.webm" poster="movie.jpg" controls>
	This is fallback content to display for user agents that do not support the video tag.
</video>

Атрибут «controls» позволяет собственному пользовательскому интерфейсу браузера управлять воспроизведением. В качестве альтернативы воспроизведением можно управлять с помощью JavaScript , который веб-дизайнер может использовать для создания пользовательского интерфейса. Необязательный атрибут «poster» указывает изображение, которое будет отображаться на месте видео перед началом воспроизведения. Его цель — представить видео.

Множественные источники

Поддержка видеоформатов различается в зависимости от браузера (см. Ниже), поэтому веб-страница может предоставлять видео в нескольких форматах. Для других функций иногда используется анализ браузера , который может быть подвержен ошибкам: любой веб-разработчик знает браузеры, что неизбежно будет неполным или устаревшим. Соответствующий браузер лучше всех знает, какие форматы он может использовать. Элемент «видео» поддерживает откат за счет указания нескольких источников. Используя любое количество элементов <source>, как показано ниже, браузер автоматически выберет файл для загрузки. В качестве альтернативы для достижения того же можно использовать функцию JavaScript canPlayType () . Атрибут «type» указывает тип MIME и, возможно, список кодеков, который помогает браузеру определить, может ли он декодировать файл, не загружая его. Тип MIME обозначает формат контейнера файла, а формат контейнера определяет интерпретацию строки кодека.

<video poster="poster.jpg" controls>
	<source src="av1.mp4" type='video/mp4; codecs="av01.0.00M.08, opus"'>
	<source src="avc.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
	<source src="vp9.webm" type='video/webm; codecs="vp9.0, opus"'>
	<source src="theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
	<p>This is fallback content to display for user agents that do not support the video tag.</p>
</video>

Вставка видео в HTML5 без плеера

А так можно вставить видео на страницу с HTML5, здесь атрибут poster — это путь к изображению-заставке:

<video width="400" height="300" controls poster="images/zastavka.png">
    <source src="papka/name.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"'>
    <p>Ваш браузер не поддерживает просмотр</p> 
    <a href="papka/name.mp4">Скачать видео</a>
</video>

Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com.

Минусом этого способа будет то, что на некоторых устаревших устройствах код будет работать некорректно. Если кроссбраузерность жизненно необходима, то лучше применять вариант №1 — вставку видео с использованием плеера.

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

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML5 Video Support

The video tag () has been in HTML5 for several years now and all the modern browsers support it. The Video For Everybody Test Page illustrates its usage in clear terms.

Browser support table for the <video> tag

Here’s how easy it is to add it to your page:

In fact, you likely use this every day. Netflix used to rely on Silverlight as their video player, but it now runs on HTML5 video. YouTube previously ran on Flash, but now much of its content is being served via HTML5. You know those video players you see on Xbox One (YouTube, Xbox Video, Netflix, etc.)? Yup, those are all HTML5 as well.

It’s even gotten a lot easier to test HTML5 video across browsers, especially on various versions of Internet Explorer and the new Project Spartan. To do this, you can get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device.

Дополнительные атрибуты

Атрибут Значение Описание
autoplay autoplay Указывает, что воспроизведение видео начнется сразу после его готовности
controls controls Указывает, что элементы управления видео должны отображаться (например, кнопка воспроизведения/паузы и т.д.).
height pixels Устанавливает высоту видео проигрывателя
loop loop Указывает, что видео будет начинаться снова, каждый раз, когда он закончится
muted muted Указывает, что аудиовыход видео должен быть отключен
poster URL Указывает изображение, которое будет отображаться во время загрузки видео, или до тех пор, пока пользователь не достигнет кнопки воспроизведения
preload auto
metadata
none
Указывает, если и как автор считает, что видео должно быть загружено при загрузке страницы
src URL Указывает URL-адрес видео-файла
width pixels Устанавливает ширину видео проигрывателя

jQuery Plugin to plays Audio & Video on Hover : Media Hovers

November 21, 2017
|
HTML5, Plugins, Premium, Video & Audio

Get Motion to your images. Media Hovers is a responsive HTML5 plugin which plays audio and video on hover. It can be applied to any element. Just specify thumbnail and audio or video file and turn it into your hover. Media Hovers also supports lightbox mode where images and videos can be viewed in larger mode.

Features:

  • HTML5 video and audio support
  • Cross browser compatible
  • IOS and Android support
  • Font Awesome Library icons
  • Mix both audio and videos in the same page
  • Optional image slideshows while audio plays
  • Social sharing support (facebook, twitter, google plus)
  • Lightbox support

Strapslide : jQuery Responsive Bootstrap Slider Plugin

August 16, 2013
|
Bootstrap, CSS2 / CSS3.0, HTML5, Plugins, Premium, Responsive, Slider

Strapslide is the ultimate premium Bootstrap Slider Plugin offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. Even more important, it is fully responsive and mobile optimized and can take on any dimensions.

Features:

  • jQuery 1.7 – jQuery 2.x Supported
  • Based on Bootstrap
  • CSS3 Transition library
  • Touch Enabled
  • Responsive
  • Pause on Hover
  • Dynamic Pagination
  • Keyboard Navigation
  • HTML5 Support to play self hosted videos
  • Animation of each Caption element
  • Powerful CSS Transitions with jQuery FallBack
  • Adapts to Bootstrap spans
  • Set Fullscreen YouTube and Vimeo Videos

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML Tables
HTML Tables
Table Borders
Table Sizes
Table Headers
Padding & Spacing
Colspan & Rowspan
Table Styling
Table Colgroup

HTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Почему видео лучше заливать на Youtube, а не на свой сайт

Уверен у многих возник вопрос: как добавить видео, которое лежит на компьютере, а в интернете его нет? Тут есть 2 варианта:

  • Загрузить на свой хостинг;
  • Загрузить на Ютуб.

Первый вариант подойдет только в том случае, если видео секретное и не предназначено для широкой публики. Если это не так — не ломайте себе голову и воспользуйтесь вторым способом! Почему, спросите вы. Все просто: во-первых, видео часто весит довольно много, а у каждого хостера есть ограничения на объем файлов, которые он вам предоставил. Переходить на более дорогой тариф только из-за видео — непозволительная глупость!

Во-вторых, если видео-файл лежит у вас на хостинге, то каждый просмотр — создает лишнюю нагрузку на сервер, она вам нужна?)

Преимущества размещения на сервисе Youtube очевидны — неограниченное пространство, и вся нагрузка ложится на Ютуб.

Теперь, когда вы знаете как вставить видео на свой блог, я прощаюсь с вами. Добавляю видео, как обещал. Посмотрите, очень красиво сняли.

Common Audio Formats

MP3 is the best format for compressed recorded music. The
term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description
MIDI .mid.midi MIDI (Musical Instrument Digital Interface).
Main format for all electronic
music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics.
Plays well on all computers and music hardware, but not in web browsers.
RealAudio .rm.ram RealAudio.
Developed by Real Media
to allow streaming of audio with low
bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in
web browsers.
AAC .aac AAC (Advanced Audio Coding).
Developed by Apple as the default format for
iTunes. Plays well on Apple computers, but not in web browsers.
WAV .wav WAV.
Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems.
Supported by
HTML.
Ogg .ogg Ogg.
Developed by the Xiph.Org Foundation. Supported by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files.
MP3 is the most popular format for music players. Combines good
compression (small files) with high quality. Supported by all browsers.
MP4 .mp4 MP4
is a video format, but can also be used for audio. Supported by all browsers.

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

❮ Previous
Next ❯

A Primer on Video Formats

There are a number of formats to choose from, so let’s go through some of the ones you can use today. First and foremost, we should understand how adaptive streaming works, considering many of these technologies that lie ahead rely on this.

Adaptive streaming segments video into small chunks. The ‘adaptive’ part of this is the fact that video is encoded at multiple bitrates and resolutions creating chunks of multiple sizes. From there, the player can choose between different bitrates/resolutions and adapt to larger or smaller chunks automatically as network conditions change.

Scott Hanselman describes it (well, Smooth Streaming at least) well.

Progressive MP4

This downloads and caches video on the viewer’s computer. A short period of time is required to buffer and cache the beginning of the media file before it starts playing. Once the video has been cached, subsequent viewing does not require any buffering. Using the standard HTTP protocol, progressively downloaded files are generally delivered through a content delivery network (CDN). So your video player creates a direct HTTP connection with the CDN’s (Azure) servers to retrieve the content.

The downfall to using something like this is the wasted bandwidth. The player will start video playback as soon as it has enough data to do so, but it will continue to download until it has received the whole file, regardless of how much the user watches. What happens when the viewer leaves after one minute? Wasted bandwidth.

Moreover, this does not allow the quality of the video to change mid-download, unlike the formats listed below.

HLS

HTTP Live Streaming (HLS) is owned by Apple and works is based on the idea of adaptive streaming, and usually done in 10 second chunks. Additionally, it works for both video on demand content, too. It supports both live and on-demand video.

Smooth Streaming

This was announced in October of 2008 as part of Silverlight, and is a feature of Internet Information Services (IIS) Media Services, an integrated HTTP-based media delivery platform.

Smooth Streaming has all of the typical characteristics of adaptive streaming. This is delivered over HTTP, segmented into small chunks, and usually multiple bit rates are encoded so that the player can look at your network conditions to choose the best video bit rate to deliver an optimal viewing experience.

Low web-based infrastructure costs, firewall compatibility and bit rate switching are just some of the perks of adaptive streaming.

MPEG Dash

The big differentiator with DASH is that it is an international standard that is now controlled by a standards body – the Motion Picture Experts Group (MPEG) – instead of being controlled by Microsoft (Smooth Streaming) or Apple (HLS). Several companies participated in the creation and standardization efforts around MPEG DASH, including Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung, and many more.

We see MPEG-DASH as the eventual replacement for all of the features that we have introduced and implemented in the past years with Smooth Streaming. Over time we will get out DASH support to have feature parity with Smooth, and introduce some even cooler features that are only available to us in an industry standard like DASH .

HTML Audio/Video Events

Event Description
abort Fires when the loading of an audio/video is aborted
canplay Fires when the browser can start playing the audio/video
canplaythrough Fires when the browser can play through the audio/video without stopping for buffering
durationchange Fires when the duration of the audio/video is changed
emptied Fires when the current playlist is empty
ended Fires when the current playlist is ended
error Fires when an error occurred during the loading of an audio/video
loadeddata Fires when the browser has loaded the current frame of the audio/video
loadedmetadata Fires when the browser has loaded meta data for the audio/video
loadstart Fires when the browser starts looking for the audio/video
pause Fires when the audio/video has been paused
play Fires when the audio/video has been started or is no longer paused
playing Fires when the audio/video is playing after having been paused or stopped for buffering
progress Fires when the browser is downloading the audio/video
ratechange Fires when the playing speed of the audio/video is changed
seeked Fires when the user is finished moving/skipping to a new position in the audio/video
seeking Fires when the user starts moving/skipping to a new position in the audio/video
stalled Fires when the browser is trying to get media data, but data is not
available
suspend Fires when the browser is intentionally not getting media data
timeupdate Fires when the current playback position has changed
volumechange Fires when the volume has been changed
waiting Fires when the video stops because it needs to buffer the next frame

❮ Previous
Next ❯

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector