Skip to content

Instantly share code, notes, and snippets.

@Ser-Gen

Ser-Gen/about.md

Last active October 19, 2015 15:32
Show Gist options
  • Save Ser-Gen/3eb278fc1b1510b59ab1 to your computer and use it in GitHub Desktop.
Save Ser-Gen/3eb278fc1b1510b59ab1 to your computer and use it in GitHub Desktop.
Download ZIP
Работа с видео
Raw
about.md

Изначально видео может быть слишком большим, что может создать проблемы пользователям медленных интернетов; видео нужно оптимизировать.

Репозиторий модуля для упрощения оптимизации видео, пример его настройки.

Модуль использует ffmpeg для преобразования видео. Здесь можно узнать, как устанавливать ffmpeg на вин, её сборки тут. Полезно будет прочитать, какие настройки использовать для оптимизации.

Чтобы воспроизведение через флеш начиналось сразу, нужно дополнительно конвертировать видео при помощи qt-faststart (подробнее). qt-faststart.exe нужно положить в папку bin в ffmpeg, этот файл должен быть добавлен в path, чтобы модуль оптимизации мог запускать его.

Был выбран проигрыватель Video.js из-за его бесплатности, работы в устаревших браузерах (через флеш), богатого api. По умолчанию кнопка начала воспроизведения в проигрывателе не по центру, как исправить. Пример:

.vjs-big-play-button {
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

Чтобы проигрыватель автоматически занимал столько места, сколько есть в контейнере, в котором он находится, можно применять это дополнение: video.responsive.js.

Дополнение для возможности выбора качества видео из проигрывателя.

Дискуссия про обеспечение резиновости видео.

Raw
gruntfile.js
module.exports = function(grunt) {
'use strict';
var debug;
debug = !!grunt.option('debug');
require('load-grunt-tasks')(grunt);
grunt.initConfig({
responsive_videos: {
myTask: {
options: {
sizes: [{
width: 1280,
poster: {
fastseek: '00:01:30'
}
}],
additionalFlags: [
{'-movflags': 'faststart'}
],
encodes:[{
webm: [
{'-vcodec': 'libvpx'},
{'-acodec': 'libvorbis'},
{'-q:a': '100'},
{'-quality': 'good'},
{'-cpu-used': '0'},
{'-b:v': '1000k'},
{'-qmax': '60'},
{'-maxrate': '1000k'},
{'-bufsize': '2000k'},
{'-threads': '0'}
],
mp4: [
{'-vcodec': 'libx264'},
{'-acodec': 'libvo_aacenc'},
{'-pix_fmt': 'yuv420p'},
{'-q:v': '4'},
{'-q:a': '100'},
{'-threads': '0'}
]
}]
},
files: [{
expand: true,
src: ['**.{mov,mp4}'],
cwd: 'assets/video/src',
dest: 'assets/video/'
}]
}
},
})
return grunt.registerTask('default', ['responsive_videos']);
};
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="windows-1251">
<title>Test-Video</title>
<style>
body {
margin: 0;
overflow-y: scroll;
}
.embedFill {
height: auto;
width: 100%;
}
</style>
</head>
<body>
<!-- стили проигрываетеля и их переопределение (при необходимости) -->
<link href="/js/video/video-js.css" rel="stylesheet"/>
<style>
.vjs-default-skin .vjs-big-play-button {
left: auto;
right: .5em;
}
</style>
<!-- скрипт проигрываетеля и путь к флеш-замене -->
<script src="/js/video/video.js" type="text/javascript"></script>
<script type="text/javascript">
videojs.options.flash.swf = "/js/video/video-js.swf"
</script>
<!-- проигрыватель, который будет преобразован скриптом -->
<!-- будет отображаться, если отключены скрипты и поддерживается видео -->
<video id="example_video" class="video-js vjs-default-skin embedFill" controls preload="auto" poster="/assets/video/example/example.jpg" width="500" height="300">
<source src="/assets/video/example/example.mp4" type='video/mp4'/>
<source src="/assets/video/example/example.webm" type='video/webm'/>
<p class="vjs-no-js">Отчего-то у вас не отображается это видео. Возможно, отключен джаваскрипт или ваш браузер не обладает функцией проигрывания веб-видео.</p>
</video>
<!-- проигрыватель будет растягиваться под свой контейнер -->
<script src="/js/video/video.responsive.js" type="text/javascript"></script>
</body>
</html>
Raw
package.json
{
"name": "test-video",
"version": "0.0.0",
"devDependencies": {
"load-grunt-tasks": "^0.6.0",
"grunt-contrib-watch": "^0.6.1",
"grunt": "^0.4.5",
"grunt-responsive-videos": "^0.1.1"
}
}
Raw
video.responsive.js
// проигрыватель будет растягиваться под свой контейнер
// навеяно http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/
// http://jsbin.com/idinaf/4/edit
// про создание плагинов https://github.com/videojs/video.js/blob/master/docs/guides/plugins.md
function videoResponsive() {
// проверка версии эксплорера через условные комментарии
// https://gist.github.com/paulirish/357741
var docElem = document.documentElement;
var isIE;
var b = document.createElement('B');
b.innerHTML = '<!--[if lte 8]><b id="iecctest"></b><![endif]-->';
docElem.appendChild(b);
isIE = !!document.getElementById('iecctest');
docElem.removeChild(b);
// сохраняем контекст
var player = this;
var id = player.id();
// нужно сохранять соотношение сторон
// для этого подсчитаем его из изображения-заглушки
var poster = new Image();
var aspectRatio;
// как только загрузится изображение-заглушка
poster.onload = function () {
// считаем соотношение сторон, получая настоящие размеры изображения
if ('naturalWidth' in poster) {
aspectRatio = poster.naturalHeight/poster.naturalWidth
} else {
// в неподдерживающих брать обычные размеры
// https://gist.github.com/johan/2209957
aspectRatio = poster.height/poster.width;
}
// присваиваем получившиеся размеры
function resizeVideoJS(){
var width = document.getElementById(id).parentElement.offsetWidth;
player.width(width).height( width * aspectRatio );
// ИЕлте8 не перерисовывает страницу при динамическом изменении размеров
// нужно принудительно вызвать перерисовку страницы
if (isIE) {
// добавляем встроенные стили (они вызовут перерисовку)
// и готовимся удалить их
// http://www.phpied.com/dynamic-script-and-style-elements-in-ie/
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.id = 'IE_REFLOW';
style.styleSheet.cssText = 'html{position:relative;top:1px;}body{position:relative;top:-1px;}';
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
// удаление стилей
// http://stackoverflow.com/a/19298575
setTimeout(function () {
document.getElementById('IE_REFLOW').outerHTML = '';
}, 0)
};
}
// запускаем сразу и при изменении размеров окна
resizeVideoJS();
window.onresize = resizeVideoJS;
}
poster.src = player.poster();
};
// регистрируем плагин, чтобы потом применять его
vjs.plugin('videoResponsive', videoResponsive);
// применяем плагин ко всем проигрывателям на странице
(function() {
var players = document.querySelectorAll('.video-js');
var playersLen = players.length;
// если проигрыватели есть
if (playersLen) {
for (var i = 0; i < playersLen; i++) {
vjs(players[i].id, {
plugins: {
videoResponsive: ''
}
});
};
};
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment