Видео формат html5 скачать


HTML5 Video Formats and Codec

When web masters working with HTML5 video, the most important thing they may want or have to know is the video formats and codecs for HTML5. So what are the HTML5 video formats and codecs? As of now, the three HTML5 browser supported video codecs are:

  • MP4: MPEG 4 files with h364 video codec and AAC audio codec
  • WebM: WebM files with VP8 video codec and Vorbis audio codec
  • Ogg: Ogg files with Theora video codec and Vorbis audio codec

Before you choose the codec for HTML5, keep in mind only these three are compatible with HTML5 browsers, not Flash or any other formats or codecs. Now you understand the HTML5 video formats and codecs. But which one should I use when converting my videos, I have to make a choice anyway, right? Yes, it is true with most video encoders or video converters. Before you go to convert a video to another format, you will always be asked to make a selection between different codecs, formats or devices. The only exception is HTML5 Video Player, which is designed specially for HTML5 video conversion and embedding. It can encode your video into three HTML5 video formats supported by all latest web browsers at the same time. Ok, now let’s say you do not have HTML5 Video Player installed, then how to select HTML5 video codec(s) that would actually work with HTML5 browsers on almost all devices?

Unfortunately, no one codec would work with all the major players, so if you want your video to be seen by the largest group of people, you should consider converting it into at least two formats WebM and H.264. Bellow table shows the browser support for HTML5 video codecs:

HTML5 Video Formats Codecs

 

Android

Chrome

Firefox

Internet Explorer

iOS

Opera

Safari

Codec

 

Win

Mac

Win

Mac

Win

Win

Mac

Win

Mac

MP4 or H.264

3.0 9 7 X X 9 3 X X 5 5

WebM

2.3 9 7 3.6 3.6 Component required! X 10.63 10.63 X X

ogg/Theora

2.3 9 7 3.6 3.6 X X 10.63 10.63 X X

From the above HTML5 video codec support table, we can see that as long as you can have both mp4 and webm embedded, your website videos should be played on almost all the computers on Windows or Mac system, mobiles and tablets on Android and iOS.

However converting videos to HTML5 video formats could be a trouble for most of us, as not everyone are pros, we do not know how to encode a video, let alone encoding to different codecs for merely one video. You may be able to find many video converters or encoders to convert MP4 or H.264 Codec, however it can be very difficult to find tools to convert to ogg/Theora and WebM/ VP8. For a one-stop solution, we recommend you to try HTML5 Video Player by Socusoft, you can download HTML5 Video Player here.

www.html5videoplayer.net

Convert HTML5 Video to Any Format

HTML5 is more and more popular in the Internet community since users don't need any plug-ins to play and watch videos in web browsers. Generally, HTML5 supports WebM, MP4 and OGG while WebM is said to be the future of the web. And it's a hot topic on how to convert video to HTML5 and how to convert HTML5 files for convenient playback. In this article, let's take a look at how to use a HTML5 video converter to complete the HTML5 conversion with ease in Windows/Mac.

Aimersoft Video Converter Ultimate, an ideal HTML5 converter, can fast convert movies to HTML5 format for IE, Chrome, Safari and more. Vice versa, it can convert HTML5 videos to popular video formats for play anywhere you like. Supported video formats include AVI, WMV, ASF, MTS, M2TS, MOV, MP4, 3GP, M4V, FLV, VOB, MKV, MPG, MPEG and more. If you're using a Mac, get the equivalent HTML5 converter for Mac. Now download the right version and check out the steps to accomplish the task.

Download HTML5 Video Converter:

How to easily convert video to HTML5 or convert HTML5 video

Note that here the screenshots of HTML5 movie converter for Windows (Windows 8) are used to show you how to quickly get your work done. The way to complete the conversion on Mac OS X (Mountain Lion) is the same. Just get the right version and follow the intuitive interface to finish your task with ease.

1 Import video files

After downloading, install and launch the program. This HTML5 file converter comes with a very dynamic interface so you can easily finish the operations. First, click Add Files to load the HTML5 videos or other media files to the program. Alternatively, you can directly drag video files to the left item bar for conversion. All the loaded files will be displayed on the left and you're then free to preview them, take snapshots, choose subtitle and audio tracks, etc.

Tips: Besides converting files to HTML5 and changing HTML5 movies, this HTML5 video converter can also download online HTML5 videos from YouTube and vimeo, burn HTML5 videos to DVD for playing on any standard home DVD player or TV, rip DVD movies to HTML5 files for sharing online, etc.

2Specify an output video format

Next, click the triangle icon of Output format to select an output file format. For converting movies to HTML5, you can go to Format > Video and choose WebM or MP4 as the output format. For converting HTML5 files, you can either choose a format or a device as the output format. (Setting a device as the output format means you will get videos with the best settings for that device.)

3 Start conversion and just enjoy your videos

Now you're come to the last step: click the big Convert button to start converting your media files. This smart HTML video converter will then do the rest for you. Wait a moment for the conversion to be done. After that, click Open Folder to locate the converted video files.

OK, all is done! Now you're ready to share your videos on HTML5 webpages or play downloaded HTML5 videos on your iPhone, iPad, iPod, Apple TV, HTC, Samsung and more! Don't hesitate to get the program and start the pleasant journey!

Download HTML5 Converter:

About HTML5 Video: HTML5 video is introduced for the purpose of playing videos or movies, partially replacing the object element. Now HTML5 video has becomes the new standard to show video online without any plug-ins. It seems the HTML5 video formats is the future of the web. However, currently, there are some disagreements on the web browser supported video formats and this format is hampered. (For HTML5 videos, currently, Safari and IE prefer MP4, Chrome and Opera like WebM while Firefox chooses OGG.) For more info, please refer to: http://en.wikipedia.org/wiki/HTML5_video.

www.aimersoft.com

Top 3 online html5 video converters

Gone are the days when you were required to use Adobe Flash or GIFs for creating high quality animation content on your website. Nowadays, HTML5 has enabled the web designers to do their job without using slow-loading GIF animations or Adobe Flash. HTML5 video player is preferred due to number of reasons. Foremost reason behind its popularity is that it provides solid support for android phones, iPhones, iPads, tablets etc. As majority of the people use mobile phones for browsing, it is a big feature that HTML5 provides.

Other reasons include:

  • Full browser support
  • Ease of adding applications and links to video
  • Quick integration with websites
  • Built-in tags to manage the video

As HTML5 has become the prominent video player, you are assumed to use HTML5 videos on your website. It will definitely help you to increase traffic on your website. But, there is one main concern that you need to think over. HTML5 supports only three formats which are OGG, WebM and MP4. So, you are required to first convert your videos into these formats. To help you for this video conversion, here we are going to tell you about 3 online HTML5 video converters.

1.Zamzar

This converter has been specifically designed for converting the video files into HTML5- compatible formats. You can use this application for converting any format’s video files and getting the output in MP4 and OGG formats. There are multiple quality-presets among which you can choose the desired one. Along with enabling you to choose from included presets, this converter also allows you to create your own presets. The conversion process is really simple. You need to enter the video URL and select the video format for output. Then you are asked to enter your email address where the link and converted file is sent after conversion.

Pros

  • Elegant and easy to use user interface
  • Supports a wide range of video formats
  • Enable you to configure the output quality
  • Include various interchangeable themes

Cons

  • It does not have any functionality for playing videos.

2. Online-Convert.com

Online-Convert.com is a website which provides plenty of conversion tools. It allows the users to choose any of the video conversion tools which, suits their needs. So, you can easily convert your videos to HTML5 supported formats. It is among the best online converters that you can use for converting HTML5 videos. The major advantage of this tool is that it can also work with the videos which are online and which are stored on Dropbox. Moreover, you are also allowed to change the options of video conversion tools like you can adjust the resolution, video quality, and can change the bitrate options.

Pros

  • Interface of this online tool is designed in very effective and user friendly way.
  • It is free to use.
  • No registration is required.
  • For video conversion, you can simply select the desired format or can select the device for which you want to convert the video.

Cons

  • There is no major drawback of this tool.

3. Gfycat

This web-based application converts GIF files to the video formats that are supported by HTML5. Thus, the size of files is reduced without getting its quality affected. Though it is not only a video conversion solution, but is also a hosting service. Gfycat has GIF Format Yoker (gfy), which selects the output formats for the videos according to the browser you are using.

Pros

  • There is no disruption of ads on this online converter.
  • It is extremely easy to use.
  • Free to use
  • It features two viewing modes for converted videos- daytime and night mode.
  • It provides advanced playback options.

Cons

1. Wondershare Video Converter Ultimate

This is a video conversion utility that can meets all your video conversion needs. If you are looking for the HTML5 video conversion tools, then this is the one you can rely on. Let us enlist some of the key features of this online converter.

  • It is the fastest video conversion solution. You will be surprised to know that its video conversion rate is 30 times more than its competitors.
  • It supports more than 160 video formats and many new formats are being added to it shortly.
  • Whatever format you are choosing for the output video, it brings out conversion without affecting the quality.
  • It enables you to transfer the converted videos to your device through existing Wi-Fi network. You are no more required to use USB cable.

Pros

  • It supports a wide range of video formats.
  • It is extremely easy to use.
  • It is compatible with all OS including Windows 8.
  • It provides you the fastest video conversion.

Cons

  • Wondershare Video Converter Ultimate is not free.
  • Though the application is easy to use, but it will take some time to understand all its features.

2. Any Video Converter Ultimate

Converting videos with Any Video Converter Ultimate is really easy. You will be glad to know that it can convert videos to all the three video formats that are supported by HTML5. It supports a large range of video formats and converts them into WebM, MP4 or OGG according to the requirements of user. Any Video Converter Ultimate provides you lots of amazing features like removing the unwanted video parts, changing the contrast and brightness effects and many others.

Pros

  • It has easy to use GUI.
  • Supports batch processing ensuring perfect quality and fast speed.
  • Videos are converted in just three steps.
  • It supports a wide range of video formats.
  • Good support for all the platforms.
  • It enables you to upload videos directly to the server.
  • It allows you to add subtitles to the video.

Cons

  • Not free,edit function is not as good as wondershare video converter ulitmate

No doubt that all the above given HTML5 video converters are good, but Wondershare Video Converter Ultimate is the best. Though it is paid and you may not be looking for a paid one, but if you want secure, safe and fastest HTML5 video conversions, then it is the converter you should go for. The features that this wonderful converter is providing are just incomparable.

www.wondershare.com

Поддерживаемые форматы аудио и видео

175

Веб-программирование --- HTML5 --- Поддерживаемые форматы аудио и видео

В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.

По поводу войны мультимедийных форматов для HTML5 у веб-разработчиков имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео HTML5 находятся в состоянии безнадежной конфронтации и на ком лежит главная вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого разработчика браузеров есть свои оправдания и объяснения, каким стандартам мультимедиа отдать предпочтение.

Небольшие разработчики, такие как Mozilla, создатели браузера Firefox и разработчики Opera, не желают платить непомерно высокую для них цену за лицензию на использование таких популярных стандартов, как MP3 для аудио или H.264 для видео (хотя поддержка этих стандартов включена в версии Firefox 24 и выше, после солидного спонсирования от Google ;). И их трудно винить за это, ведь они предоставляют свои продукты бесплатно.

У компаний покрупнее (таких как Microsoft, Google или Apple) имеются свои оправдания почему надо избегать нелицензированных стандартов. Они жалуются, что качество работы этих стандартов будет ниже (в настоящее время они не поддерживают аппаратное ускорение) и что они не так широко используются, как запатентованные стандарты, такие как, например, H.264, который используется в камкордерах, проигрывателях Blu-Ray и во многих других разных устройствах.

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

Знакомимся с форматами

Официальный стандарт HTML5 не требует, чтобы браузеры поддерживали какой-либо конкретный аудио- или видеоформат. (Ранние версии стандарта содержали такую рекомендацию, но в результате интенсивного лоббирования она была отменена.) Вследствие этого разработчики браузеров могут выбирать форматы, какие они хотят поддерживать, несмотря на то обстоятельство, что разные форматы органически несовместимы друг с другом. Список и краткое описание основных форматов, используемых в настоящее время, приведен в таблице:

Формат Описание Расширение файла MIME тип
MP3 Самый популярный аудиоформат в мире. Но стоимость лицензии делает его непрактичным для небольших разработчиков, наподобие Opera mp3 audio/mp3
Ogg Vorbis Открытый, бесплатный стандарт, предоставляющий высококачественное сжатое аудио, сравнимое с MP3 ogg audio/ogg
WAV Первоначальный формат для сырого цифрового аудио. Не использует сжатие, поэтому файлы невероятно большого объема и непригодны для большинства интернет-приложений wav audio/wav
H.264 Промышленный стандарт для кодирования видео, особенно при работе с видео высокой четкости. Применяется в бытовых устройствах (таких как проигрыватели и камкордеры Blu-Ray), на видеообменных сайтах (таких как YouTube и Vimeo) и в браузерных модулях расширения (таких как Flash и Silverlight) mp4 video/mp4
Ogg Theora Открытый, бесплатный стандарт для видео, созданный разработчиками аудиостандарта Vorbis. Качество и производительность ниже стандарта H.264, но достаточно высокие, чтобы удовлетворить потребности большинства пользователей ogv video/ogg
WebM Новейший бесплатный видеоформат, созданный Google на основе приобретенного ими VP8. Критики доказывают, что его качество еще не на уровне видео H.264 и он может содержать скрытые связи с другими патентами, что может вызвать лавину судебных исков в будущем. Тем не менее, WebM является наилучшим выбором для будущего открытого видео webm video/webm

В этой таблице также указаны рекомендуемые расширения файлов для мультимедиа. Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла в действительности применяются три разных стандарта. Первым, наиболее очевидным, стандартом является видеокодек, применяемый для сжатия видео в поток данных. В качестве примера можно назвать такие кодеки, как H.264, Theora и WebM.

Вторым является аудиокодек, который применяется для сжатия одной или нескольких аудиодорожек. Например, для видео в формате H.264 обычно используется звук в формате MP3, а для видео Theora - звук Vorbis. Наконец, формат контейнера применяется для упаковки видео и аудио вместе с описательной информацией и, необязательно, другими безделушками типа изображений и субтитров. Часто расширение файла обозначает формат контейнера, т.е. расширение mp4 означает контейнер типа MPEG-4, расширение ogv — контейнер Ogg и т.п.

Но не все так просто, т.к. формат контейнера поддерживает несколько разных аудио- и видеостандартов. Например, популярный контейнер Matroska (mkv) может содержать видео в формате H.264 или Theora. Чтобы не усложнять этот вопрос излишними подробностями, в приведенной таблице каждый видеоформат соотнесен с наиболее употребляемым для его упаковки контейнером, для которого также обеспечивается наиболее высокий уровень поддержки для Интернета.

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

Поддержка браузерами форматов мультимедиа

Все аудио- и видеоформаты в мире будут вам бесполезны, если вы не знаете, как они поддерживаются разными браузерами. Разобраться в этом вопросе вам поможет следующие таблицы, в которых показаны поддержки основными браузерами аудио- и видеоформатов:

Поддержка браузерами аудиоформатов HTML5
IE Firefox Chrome Safari Opera Safari iOS Android
MP3 9 24 5 3.1 - 3 -
Ogg Vorbis - 3.6 5 - 10.5 - -
WAV - 3.6 8 3.1 10.5 - -
Поддержка браузерами видеоформатов HTML5
IE Firefox Chrome Safari Opera Safari iOS Android
H.264 9 24 5 3.1 - 4 2.3
Ogg Theora - 3.5 5 - 10.5 - -
WebM 9 (при установке кодеков) 4 6 - 10.6 - 2.3

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

Если вы хотите, чтобы видео проигрывалось на мобильных устройствах, примите за правило кодировать его в формате H.264 Baseline Profile (а не в формате High Profile). Для телефонов iPhone и под управлением операционной системы Android следует использовать размер 640x480, а для BlackBerry — 480x360. Многие программы кодирования имеют предварительные настройки, с помощью которых можно создать видео, оптимизированное для мобильных устройств.

Множество форматов: как понравиться всем браузерам

Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда состоит в том, что ни один аудио- или видеоформат не будет работать на всех браузерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы должны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кроме этого, вам, скорее всего, нужно будет организовать резервное решение Flash для посетителей, которые пользуются браузерами, не признающими HTML5, такими как, например, IE8.

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

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

Использовать Flash в качестве основного решения, а HTML5-решение в качестве резервного

Таким образом, все посетители вашего сайта смогут использовать Flash, за исключением тех, на чьих браузерах этот модуль не установлен. Эта стратегия имеет смысл, если вы уже предоставляете на своем сайте видеосодержимое посредством Flash, но хотите еще привлечь пользователей iPad и iPhone.

Использовать HTML5 в качестве основного решения, а Flash-решение — в качестве резервного

Таким образом, все посетители получают HTML5-видео и/или аудио, за исключением тех, кто использует старые браузеры, которые получают Flash-содержимое. Если вы пойдете этим путем, можно также поддерживать меньшее число форматов HTML5. В таком случае посетители, чьи браузеры хотя и поддерживают HTML5-мультимедиа, но не поддерживают предоставляемые вами форматы, также получат Flash-содержимое. Так как будущее за этим подходом, то он является предпочтительным при условии, что текущие ограничения HTML5 видео и аудио — вам не помеха.

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

Элемент <source>

Первым шагом в обеспечении поддержки нескольких форматов будет удаление атрибута src из элемента <video> или <audio> и замена его вложенным списком элементов <source>. Например:

<audio controls> <source src="mysong.mp3" type="audio/mp3"> <source src="mysong.ogg" type="audio/ogg"> </audio>

В данном случае элемент <audio> содержит два элемента <source>, каждый из которых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает первый, формат которого он поддерживает. В частности, Opera возьмет файл mysong.ogg, a Firefox, Safari и Chrome - файл mysong.mp3.

Теоретически, браузер может определить, поддерживает он или нет конкретный файл, загрузив и исследовав небольшую его часть. Но лучшим подходом будет использовать атрибут type, чтобы предоставить правильный MIME-тип. Таким образом, браузер попытается загрузить только тот файл, который он, как считает, может воспроизвести.

Этот же метод применяется и для элемента <video>. В следующем листинге показан пример указания видеосодержимого в двух разных форматах — H.264 и Theora:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> </video>

В этом примере следует отметить одну новую особенность. При использовании разных видеоформатов файл в формате H.264 всегда должен быть в списке первым. В противном случае он не будет проигрываться на старых устройствах iPad под управлением iOS 3x. (Эта проблема была решена в операционной системе iOS 4, но размещение файла H.264 вверху списка ничем ничему не вредит.)

Так сколько же видеоформатов следует использовать? Чтобы прикрыть все тылы необходимо использовать форматы H.264 и Theora для основного решения HTML5 и Flash для резервного. Для лучшего качества видео формат Theora можно заменить форматом WebM. Или же можно совсем разойтись и включить все версии своего видео — H.264, Theora и WebM в указанном порядке. Версия WebM идет перед версией Theora для того, чтобы браузеры, которые поддерживают эти формата, выбрали видео лучшего качества.

Ну а если гулять по полной программе, то можно создать одну веб-страницу с видео как для настольных компьютеров, так и для мобильных устройств. В таком случае нужно не только предоставить файлы в формате H.264 и Theora, но также создать версии видеофайлов меньшего объема, более подходящие для менее мощных мобильных устройств и интернет-подключений с меньшей пропускной способностью.

Резервное решение Flash

Испокон веков все браузеры обрабатывают нераспознаваемые теги одинаково - игнорируют их. Например, если Internet Explorer 8 встречается открывающий тег элемента <video>, он с ветерком проносится мимо него, не затрудняясь ознакомиться с атрибутом src и другими параметрами этого элемента. Но при всем этом, браузеры не игнорируют содержимое внутри неизвестного им элемента, что является важной особенностью. Это означает, что в случае следующей разметки:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p> </video>

браузеры, которые не понимают HTML5, ведут себя, как будто бы они видели вот эту разметку:

<p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p>

Эта особенность и лежит в основе бесшовного предоставления резервного решения для старых браузеров.

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

Правильный подход — это включить в качестве резервного содержимого другое работоспособное видеоокно, иными словами, любое содержимое, которое бы пользовалось на обычной видеостранице, т.е. странице без поддержки HTML5. Можно использовать видеопроигрыватель Flash (или аудиопроигрыватель Flash для аудио). К счастью, в Интернете существует масса видеопроигрывателей Flash, многие из которых бесплатные, по крайней мере, для некоммерческого использования. И большинство из них поддерживает формат H.264, который вы уже, наверное, используете для HTML5-видео.

В следующем листинге приведен пример использования в качестве резервной решения в элементе <video> проигрывателя Flowplayer:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <object data="flowplayer-3.2.7.swf" type="application/x-shockwave-flash"> <param name="movie" value="flowplayer-3.2.7.swf"> <param name="flashvars" value='config={"clip":"video.mp4"}'> </object> </video>

Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента <object>, в который вставляем элемент <video> непосредственно перед закрытием тега </object>:

<object data="flowplayer-3.2.7.swf" type="application/x-shockwave-flash"> <param name="movie" value="video.mp4"> <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> </video> </object>

Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.

professorweb.ru


Смотрите также