html5 видео - все что нужно
Информация о html5 видео, дополнениях и управлению видео.
Параметры <video mute playsinline preload="auto" id="video-fon" webkit-playsinline="true" playsinline="true" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
===========
Убрать звук - mute
Отключить в Айфоне просмотр видео в браузере....
webkit-playsinline="true" playsinline="true"
Предзагрузка видео перед стартом
preload="auto"
Скрипт для предзагрузки и старта видео:
<script>
var video = document.querySelector('#video-fon');
video.autoplay = true;
video.muted = true;
video.loop = true;
if(video.paused){
video.play();
}
</script>
Запуск видео через 4 секунды
==== Пример:
<video id="video-fon">
<source src="video.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("video-fon");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 4000);
});
</script>
Запуск и пауза html5 видео с кликом по кнопке.
Код для старта и запуска видео.
<!DOCTYPE html>
<html>
<body>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br>
<video id="myVideo" width="320" height="176">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
</body>
</html>
Медиазапросы для подгонки разных видео под разные экраны:
<video controls>
<source src="large.mp4" media="screen and (min-device-width:801px)">
<source src="large.webm" media="screen and (min-device-width:801px)">
<source src="small.mp4" media="screen and (max-device-width:800px)">
<source src="small.webm" media="screen and (max-device-width:800px)">
</video>
Пример скрипта для подзагрузки нужного размера видео под экран.
HTML:
<video id="intro-video" data-src="/path/default.mp4" poster="img/poster.png" controls>
<source data-src="/path/1600.mp4" data-mw="1600">
<source data-src="/path/900.mp4" data-mw="900">
<source data-src="/path/480.mp4" data-mw="480">
</video>
data-src - це шлях до відеофайлу.
data-mw - максимальна ширина екрана, на якій має відображатися це відео.
Це рішення працює автоматично при зміні ширини екрана. Це робиться за допомогою функції resize().
JS:
class VideoResponser {
constructor(selector) {
const $video = document.querySelector(selector);
this.options = {
selector,
breakpoints: { default: { src: $video.getAttribute('data-src') } }
};
// get a list of video switching points and links to the videos themselves
$video.querySelectorAll('[data-src]').forEach(element => this.options.breakpoints[element.getAttribute('data-mw')] = { src: element.getAttribute('data-src') });
$video.innerHTML = ''; // we clean up so that there is nothing superfluous
// run the handler and track the change in screen width
this.responseVideo(this.options);
this.resizer();
}
/** Function runs on resize */
resizer() {
window.addEventListener("resize", () => this.responseVideo(this.options));
}
/**
* Change src value of video link to fit screen width
*
* @param {Object} options object with options
*/
responseVideo(options) {
const {selector, breakpoints} = options; // get options
let $video = document.querySelector(selector);
const widthNow = $video.getAttribute('data-width-now') || null;
const maxBreakpoint = Math.max.apply(Math, Object.keys(breakpoints).filter(key => key <= document.body.clientWidth).map(Number));
const nowBreakpoint = maxBreakpoint || 'default'; // choose either the maximum value, if not, then the default
if(widthNow && widthNow == nowBreakpoint) return; // check if the video needs to be changed
$video.setAttribute('data-width-now', nowBreakpoint);
$video.src = breakpoints[nowBreakpoint].src;
}
}
new VideoResponser("#intro-video");