~~574~~ 0 3-04-2019, 01:25

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");

Досвід у веброзробці: