Как сделать проигрыватель видео на html5 с нуля

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—>
<!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>
<menu>
<menuitem>
<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>
<wbr>

Атрибуты

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-код».

Можно сразу скопировать полученный код и добавить на блог, но я рекомендую перед этим перейти в настройки. Нажимаем «Еще».

Нам открывается раздел Youtube с настройками видео.

Поясню что они значат и какие из них вам нужны.

Размер видео — выбирайте под ширину вашего сайта. Если у вас адаптивный сайт, проверьте отображение на мобильных устройствах. При качественной верстке видео будет подстраиваться под ширину;
Показывать похожие видео после завершения просмотра — если вы добавили видео строго по теме, то рекомендую убрать галочку. Для развлекательных проектов и где задача удержать как можно больше посетителя на сайте — оставляйте;
Показывать панель управления — рекомендую включать: очень раздражает, когда не можешь промотать или остановить ролик;
Показывать название видео и функции проигрывателя — по желанию;
Включить режим повышенной конфиденциальности — если включить этот режим, то Youtube будет сохранять информацию о посетителях только в том случае, если они досмотрят ролик до конца. На деле ни на что не влияет.

Помимо видимых настроек, есть те, которые скрыты — дополнительные настройки видео:

autoplay=1 — начинает воспроизводить видео сразу после загрузки страницы. Не рекомендую;
loop=1 — зацикливает видео;
fs=0 — запрещает разворачивать видео на весь экран. Убирает соответствующую кнопку на панели управления;
fmt=6 — задает качество видео. fmt=18 — среднее, fmt=22 — наилучшее. Полезно применять только если у вас красивый красочный ролик, смысл которого именно передать красоту. Во всех остальных случаях советую оставить это на выбор зрителя;
iv_load_policy=3 — один из самых полезных параметров. Отключает аннотации к видео, такие как ссылки на канал автора и его другие ролики. Но не отключает рекламу Google.

Добавлять параметры просто: в коде после идентификатора видео добавляем знак «?» и пишем параметры, перечисляя их через «&». Ниже правильный пример:

XHTML

1	<iframe width=»560″height=»315″src=»https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3″frameborder=»0″allowfullscreen></iframe>

После настроек, копируем полученный код и вставляем на страницу сайта, предварительно перейдя в режим html-кода. В админке WordPress переключается здесь:

После вставки не забудьте сохранить и проверить на сайте. Собственно, вот как это выглядит у меня. Сам видеоролик вы можете посмотреть в конце статьи.

Если у вас сайт написан на одном html, или это просто локальных html-файл — инструкция точно такая же. Повторяйте.

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Definition and Usage

The attribute specifies the location (URL) of the video file.

The example above uses an Ogg file, and will work in Chrome, Edge, Firefox
and Opera.

To play the video in old Internet Explorer and Safari, we must use an MPEG4 file.

To make it work in all browsers — add several
elements inside the element. Each elements can link to
different video files. The browser will use the first recognized format:

Example

<video width=»320″ height=»240″ controls>
<source src=»movie.mp4″ type=»video/mp4″>
<source src=»movie.ogg» type=»video/ogg»>

Your browser does not support the video tag.
</video>

Подход на чистом CSS

Создайте HTML5-видео:

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
    <source src="polina.webm" type="video/webm">
    <source src="polina.mp4" type="video/mp4">
</video>

Важно: порядок видеофайлов имеет значение. В браузере Google Chrome есть ошибка, из-за которой он не может автоматически воспроизводить видео в формате .webm, если оно идет после чего-либо еще

Изображение постера будет заменено первым кадром видео после загрузки. Поэтому имеет смысл извлечь его из ролика.

Приведенный ниже код позволяет сделать видео полноэкранным:

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

Устаревшие версии браузеров не распознают видео форматы, но узнают тег <video>. Специально для этих браузеров мы создаем элемент background-image, используя ту же картинку-заполнитель.

На данном этапе только браузер Safari (мобильный и настольный) требует webkit-префикса поставщика для преобразований, поэтому он был включен в код.

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>

HTML Audio/Video Properties

Property	Description
audioTracks	Returns an AudioTrackList object representing available audio tracks
autoplay	Sets or returns whether the audio/video should start playing as soon as it is loaded
buffered	Returns a TimeRanges object representing the buffered parts of the audio/video
controller	Returns the MediaController object representing the current media controller of the audio/video
controls	Sets or returns whether the audio/video should display controls (like play/pause etc.)
crossOrigin	Sets or returns the CORS settings of the audio/video
currentSrc	Returns the URL of the current audio/video
currentTime	Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted	Sets or returns whether the audio/video should be muted by default
defaultPlaybackRate	Sets or returns the default speed of the audio/video playback
duration	Returns the length of the current audio/video (in seconds)
ended	Returns whether the playback of the audio/video has ended or not
error	Returns a MediaError object representing the error state of the audio/video
loop	Sets or returns whether the audio/video should start over again when finished
mediaGroup	Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
muted	Sets or returns whether the audio/video is muted or not
networkState	Returns the current network state of the audio/video
paused	Returns whether the audio/video is paused or not
playbackRate	Sets or returns the speed of the audio/video playback
played	Returns a TimeRanges object representing the played parts of the audio/video
preload	Sets or returns whether the audio/video should be loaded when the page loads
readyState	Returns the current ready state of the audio/video
seekable	Returns a TimeRanges object representing the seekable parts of the audio/video
seeking	Returns whether the user is currently seeking in the audio/video
src	Sets or returns the current source of the audio/video element
startDate	Returns a Date object representing the current time offset
textTracks	Returns a TextTrackList object representing the available text tracks
videoTracks	Returns a VideoTrackList object representing the available video tracks
volume	Sets or returns the volume of the audio/video

Use the tag for inserting videos in HTML¶

The <video> tag is added in HTML5 along with its sibling, <audio>. Before the release of HTML5, a video could only be played in a browser with a plug-in (like a flash). The HTML5 <video> element specifies a standard way to embed a video in a web page. That is to say that the video is identified by adding a video URL to a source attribute. One can use it to embed videos imported from the computer or hosted by an external website.

For the basic use, all we need to do in an HTML document is to add the video URL to the element by using the <source> element to identify the video URL and to add the controls attribute so that website visitors can control video options. It is also important to use the width and height attributes to set the size of the video. Let’s see a simple example.

Result

Your browser doesn’t support HTML5 video.

At a minimum, to use the <video> element, the following attributes need to be used:

src, which defines the URL where the video content is hosted,
type, which defines the format of the file,
controls, which must be specified or no visual element will appear to control playback of the content.

Moreover, there are several optional attributes which can be used to influence the way video content is loaded. These attributes include:

autoplay, which specifies that the video will start playing as soon as it is ready,
loop, which specifies that the video will start over again every time it is finished,
poster, which selects an image to display as the poster for the video until playback begins,
preload, which tells how the author thinks the video should be loaded when the page loads.

Another critical point to remember is that all modern browsers support the <video> element.

Currently, the HTML5 <video> tag supports 3 types of video files:

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Стили видеоплеера

Сохраните файл html и откройте новый файл с именем «video-player.css». Не забудьте сохранить файл css в той же папке, где html.

Теперь вернитесь в файл html и добавьте в тег <head> атрибуты, которые свяжут файл html с css-файлом: <link rel = «stylesheet» type = «text / CSS» href = «video -player.css»>.

Независимо от структуры, которую вы хотите использовать в файле css, просто указываете элемент с id, который отметили в html-файле, указав в начале #. Так вы сообщите редактору кода, какую часть необходимо стилизовать первой:

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

Я последовательно настроил все элементы создаваемого плеера в файле css.

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

У видеоплеера синий фон, он ограничен размерами дисплея плеера, так как функция display имеет значение inline-block. Поэтому веб-страница не станет полностью синей, так как синий фон будет ограничен размерами видеоплеера.

Следующий элемент проектирования — это video-tree, для которого я выбрал нужные размеры, и указал, чтобы видео выводилось на весь экран.

Для progress-tree я выбрал только цвет, и больше сосредоточился на ветке «progress», определяющей индикатор просмотра. Вам нужно выбрать для прогресс-бара цвет отличный от progress-tree, чтобы пользователи могли видеть, сколько осталось видео.

Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды «display: inline-block» и центрируется атрибутом «vertical-align: middle».

Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.

Download HTML5 Video with AceThinker Video Keeper

AceThinker Video Keeper is the best HTML5 video downloader. It can save them quickly from multiple HTML5 streaming sites, including YouTube, Vimeo, and Dailymotion. It boasts a fast download speed since it uses the full bandwidth of your internet connection to download a video. In connection with this, it can save several videos simultaneously with minimal effort. Additionally, it is equipped with a built-in web browser that you can use to watch and download HTML5 videos simultaneously. Continue reading the info below to learn how to use this excellent solution.

Try it for Free

Free Download

Secure Download

Free Download

Secure Download

Step 1 Download and Install the Software

Hit the «Download» button given to save the installer of Video Keeper. Next, follow the set-up guide properly. Its main interface will appear once it is successfully installed.

Step 2 Download HTML5 Video

After installation, open your web browser and visit any online streaming site that offers HTML5 videos. Search any video and copy its link from the address bar. Go back to Video Keeper to paste the copied URL into the search bar and press «Enter.» After that, you can click «MP4» to download it immediately. Or, hit the «Dropdown» menu on «More» to choose the video quality. Click the «Download» button to continue.

Step 3 Play HTML5 Video

Please wait for a few moments and let the software download the video. Once done, go to the «Downloaded» panel found at the left part of the software. From here, right-click the video and select «Play» to watch it. You can also choose «Open File Location» to access its output folder.

Создание функциональности с помощью JavaScript

На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его «video-player.js». Сохраните файл в той папке, которую используете для этого проекта.

Затем нужно связать файл JavaScript с исходным файлом HTML5 строкой между тегом <link> и закрывающим тегом <head>. Например: <script type = «text / javascript» src = «video-player.js»> </ script>:

В приведенных выше строках JavaScript-кода я сосредоточился только на кнопке воспроизведения.

Сначала мы вводим идентификатор элемента, с которым хотим работать в первую очередь. В нашем случае это идентификатор «play-button». Затем необходимо прописать форму кнопке через GetElementbyID.

Далее, когда зритель нажимает на кнопку воспроизведения, мы обрабатываем «Click» с помощью метода addEventListener. Функция «playOrPause» заставляет кнопку «Воспроизвести» работать, как обычную кнопку воспроизведения, а также как кнопку «Пауза».

Затем в коде создания плеера для сайта вы описываете функцию playOrPause. Если видео приостановлено, нажатие кнопки активирует воспроизведение. Если не приостановлено (блок «else»), нажатие кнопки «Воспроизвести» остановит воспроизведение.

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

Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!

ВЛВиктория Лебедеваавтор-переводчик статьи «How to Build an HTML5 Video Player from Scratch»

What’s new

EasyHTML5Video v4.0 (Aug 06, 2021)

— Batch Mode — convert multiple files simultaneously
— Added support for 30+ new video formats and codecs, including the latest .hevc (H.265), .aic (Apple Intermediate Codec), .vp9 (Google VP9)
— New HD resolutions added — FHD, QHD, 4K
— Updated «How to insert to HTML page» tutorial after export
— Improved multi-thread conversion
— Bugs fixes

EasyHTML5Video v3.9 (May 05, 2021)

— Multi-threaded video conversion — up to 8x faster, depending on the number of your CPU cores
— Updated «How to insert to HTML page» tutorial after export
— Bugs fixes

EasyHTML5Video v3.5 (Feb 26, 2021)

— Fixed bugs with converting to MP4
— Added new languages: French, Dutch, Italian, Spanish, Swedish, Brazilian Portuguese

EasyHTML5Video v3.3 (Nov 17, 2020)

— New GUI and new website

— Added «How to insert to HTML page» tutorial after an export
— Bug fixes

EasyHTML5Video v2.8 (Jul 15, 2020)

— HTML5 video is now protected from being downloaded by right-click

— Fixed an incompatibility bug with latest MacOSX
— Minor fixes

EasyHTML5Video v2.6 (May 1, 2020)

— «Keep ratio» resize method — if selected, will try to fit video to size without black stripes or cropping
— Preview window now shows a real-size output
— Minor fixes

EasyHTML5Video v2.1

— «Quality» selector — select the video quality from Low, Normal, and High. With the «High» option, the converted video is visually lossless, it looks the same as the input.
— Improvements in «Insert to Page» wizard
— Improved compatibility with IE7, IE8 and Android
— Minor fixes

Easy Html5 Video v2.0

— Responsive video — HTML5 video will fit the width of the containing area and scale depending on screen size along with your responsive website.
— Bug fixes

Easy Html5 Video v1.8

— «Custom poster» option — use any image as a poster, not only a video frame
— Interface languages — German, Creek, Russian
— Possibility to run video with disabled controller on iPad, iPhone

— Minor fixes

Easy Html5 Video v1.7

— «MP4 Low Res» option — adds low quality version of video for mobile devices, such as iPad 1,2; iPhone 3,4; Android 2.3. Select this option if you convert to HD or Full HD video.
— New compatibility hints — iOS, Android
— Improvements in «Insert to Page» wizard
— Minor fixes

Easy Html5 Video v1.6

— — inserts your video into website visually, with !
— Improvements in flash video player (it’s used for flash fallback with IE 6,7,8) — support for «loop» and «autoplay»
— Bug fixes

Easy Html5 Video v1.5

— Fullscreen support (button or double click)
— Improved support for android and iOS devices for
— Improved WebM format quality (used by Firefox, Opera)

Easy Html5 Video v1.3

— «Loop» option — if checked, plays the video in an «infinite» loop
— «Controls» option — uncheck to hide video controls
— Support for new input video formats:
Apple ProRes, Windows Media Video 9, MPEG-4 part 2 Microsoft, On2 VP8, Chronomaster DFA, Intel Indeo 3, Mobotix MxPEG video, BBC Dirac VC-2
— Bug Fixes

Easy Html5 Video v1.2

— Option to remove videos from a recent list
— 320 x 240 video size added
— Minor fixes and improvements

Easy Html5 Video v1.1

— Release!

Вставка видео в 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, где представлена инструкция по загрузке видео на сервис и правильном его оформлении. Этим способом можно продвигать любые товары и услуги в интернете, в т.ч. партнёрские инфопродукты.

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

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

Наиболее распространенные форматы вам, вероятнее всего, известны. Это 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.

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