file ссылка на файл видео или аудио, плейлист, манифест HLS или DASH, ссылка YouTube или Vimeo
poster ссылка на заставку, которая будет отображаться перед запуском плеера
title надпись или название
autoplayавтозапуск (1 или 0)
start секунда старта воспроизведения
end секунда окончания воспроизведения
duration длительность в секундах, если плеер не предзагружает метаданные
subtitle ссылка на субтитры
JS файлы обычно кэшируются браузером, поэтому при критичных обновлениях стоит сбрасывать кэш переименованием файла (не забыв при этом поменять название в коде подключения):
playerjs.js -> playerjs1.js
Асинхронный вариант
Скрипт плеера можно загружать асинхронно с версии 9.33, чтобы он не блокировал загрузку страницы.
В этом случае код плеера должен быть завернут в функцию PlayerjsAsync. Обратите внимание, что такая функция может быть только одна на странице.
function PlayerjsAsync()< player = new Playerjs(<. >); >
Источник: playerjs.com
Добавляем youtube плеер на сайт с помощью youtube API — #js #jquery #html #youtube api
Как добавить видео плеер на сайт uCoz
Вот как раз эту ссылку с браузера скопировали, нужно поставить в первый раздел, как поставили, делаем клик просто по окну, и в низу у нас появляются коды, как для bb и HTML и берем который вам нужен. Если брать от DD то знайте там размер и ширина стандартная идет, что задала сама система.
Если HTML, то там вы можете сами выставить какой вам нужно размер, все они работают на всех модулях и на форуме также. Есть еще один вариант, это с первоисточника брать, а точнее самого ютуб, то BB код берем в браузер строке, а вот HTML код, он находиться под видео, что также копируем и ставим размер и ставим.
Но к примеру иногда делаю по другому, просто ссылки многие могут брать, но нам нужно это видео, но под другим источником. Тогда создаем на Одноклассниках аккаунт и там можно в разделе видео его сформировать, что по изображению видно.
Теперь можете посмотреть видео урок:
Источник: zornet.ru
Cоздание собственного плеера на JavaScript (Youtube Player)
Наверняка многие фронтэнд разработчики да и в целом многие пользователи хоть раз интересовались работой и функционированием Youtube Player. В этой статье я расскажу, как он работает, и как сделать свой плеер для воспроизведения Youtube видео со своим интерфейсом. Так же приведу примеры для понимания, как это работает.
Для обычного пользователя снаружи ссылка на видео может выглядеть таким образом: www.youtube.com/watch?v= . Или, например, таким: youtu.be/ — где video_id — идентификатор видео в базе Youtube (он уникальный для каждого видео и самую важную информацию, по которой тянется видео, формируются ссылки и т.д). Для примера возьму, чтобы никого не обидеть (и не пиарить не дай бог) video_id=CyVuYAHiZb8 — видео ролик с Ray Charles — Hit the Road.
Как многие знают, для вставки собственно видео на свой сайт существует простая возможность «скопировать HTML код» при нажатии на видео правой кнопкой в Youtube и получить в буфере iframe:
Таким iframe как раз и можно управлять на своем сайте. Далее расскажу, как это сделать на примере формирования своих элементов управления и обработчиков событий на Javascript + Jquery.
Страница с плеером — верстка
Сначала создаем простую html-страничку, в которой будут несколько div-block’ов, на которые мы привяжем наш плеер.
body <
margin: 0;
>
.panel <
width: 850px;
height: 40px;
background: grey;
margin-top: -5px;
border: 1px solid #aaa;
>
#play, #back, #next, #pause <
float: left;
width: 50px;
height: 40px;
>
#time <
float: left;
width: 50px;
height: 40px;
color: #fff;
padding-top: 10px;
margin-left: 10px;
>
#line <
margin-top: 15px;
height: 4px;
width: 350px;
background: #fff;
float: left;
margin-right: 15px;
>
#volume <
float: left;
width: 80px;
height: 40px;
>
#quality <
float: left;
width: 50px;
height: 40px;
color: #fff;
padding-top: 10px;
margin-left: 10px;
>
#full <
float: left;
width: 75px;
height: 40px;
>
#fader <
background: black;
border-radius: 5px;
width: 10px;
height: 10px;
position: relative;
z-index: 4;
bottom: 3px;
>
#playlist <
margin-top: 20px;
>
.viewed <
position: absolute;
background: red;
height: 4px;
>
И самое главное — javascript.
Для создания и инициализации плеера через iframe api необходим div с идентификатором, к которому будет привязываться iframe с видео. В нашем случае это
Управление плеером — JavaScript
Все равно, куда вы его положите, но главное ниже подключаемых библиотек (для простоты можно прямо в html-документе).
//Инициализация плеера
function onYouTubeIframeAPIReady() <
player = new YT.Player(‘player’, <
height: ‘500’,
playerVars: < ‘autoplay’: 0, ‘controls’: 0, ‘showinfo’: 0, ‘rel’: 0>,
width: ‘850’,
videoId: ‘CyVuYAHiZb8’,
events: <
‘onReady’: onPlayerReady
>
>);
>
// Обработчик готовность
function onPlayerReady(event) <
var player = event.target;
iframe = document.getElementById(‘player’);
setupListener();
updateTimerDisplay();
updateProgressBar();
time_update_interval = setInterval(function () <
updateTimerDisplay();
updateProgressBar();
>, 1000);
>
/*Слушать события*/
function setupListener () <
document.getElementById(‘full’).addEventListener(‘click’, playFullscreen);
>
/*Включение фуллскрина*/
function playFullscreen () <
player.playVideo();//won’t work on mobile
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) <
requestFullScreen.bind(iframe)();
>
>
/*Загрузить плейлист*/
function loadPlaylistVideoIds(); <
player.loadPlaylist( <
‘playlist’: [‘9HPiBJBCOq8’, ‘Mp4D0oHEnjc’, ‘8y1D8KGtHfQ’, ‘jEEF_50sBrI’],
‘listType’: ‘playlist’,
‘index’: 0,
‘startSeconds’: 0,
‘suggestedQuality’: ‘small’
>);
>
/*Громкость*/
function editVolume () <
if (player.getVolume() == 0) <
player.setVolume(‘100’);
> else <
player.setVolume(‘0’);
>
>
/*Качество*/
function editQuality () <
player.setPlaybackQuality(‘medium’);
document.getElementById(‘quality’).innerHTML = ‘480’;
>
// Обновляем время на панельке — счетчик
function updateTimerDisplay() <
document.getElementById(‘time’).innerHTML = formatTime(player.getCurrentTime());
>
/*Формат времени*/
function formatTime(time) <
time = Math.round(time);
var minutes = Math.floor(time / 60),
seconds = time — minutes * 60;
seconds = seconds < 10 ? ‘0’ + seconds : seconds;
return minutes + «:» + seconds;
>
// Обновляем прогресс
function updateProgressBar()
var line_width = jQuery(‘#line’).width();
var persent = (player.getCurrentTime() / player.getDuration());
jQuery(‘.viewed’).css(‘width’, persent * line_width);
per = persent * 100;
jQuery(‘#fader’).css(‘left’, per+’%’);
>
/*Линия прогресса*/
function progress (event)
var line_width = jQuery(‘#line’).width();
// положение элемента
var pos = jQuery(‘#line’).offset();
var elem_left = pos.left;
// положение курсора внутри элемента
var Xinner = event.pageX — elem_left;
var newTime = player.getDuration() * (Xinner / line_width);
// Skip video to new time.
player.seekTo(newTime);
>
А теперь как это работает. Для начала создаем плеер — для этого нужна обязательная функция:
//Инициализация плеера
function onYouTubeIframeAPIReady() <
player = new YT.Player(‘player’, <
height: ‘500’,
playerVars: < ‘autoplay’: 0, ‘controls’: 0, ‘showinfo’: 0, ‘rel’: 0>,
width: ‘850’,
videoId: ‘CyVuYAHiZb8’,
events: <
‘onReady’: onPlayerReady
>
>);
>
Она вызывается сама по видимому сразу, а внутри нее создается объект YT.Player с параметрами. Первый ‘player’ — идентификатор
к которому при инициализации цепляется iframe. Далее height и width — размеры iframe, videoId: ‘CyVuYAHiZb8’ — идентификатор видео — это наш Рэй Чарльз. playerVars: < ‘autoplay’: 0, ‘controls’: 0, ‘showinfo’: 0, ‘rel’: 0>— это настройки плеера, сами говорят за себя -стоят нули, чтобы выключить элементы управления, которые мы делаем свои.
И events: — хук, цепляющий метод для обработки события готовности. Дальше как раз идет эта функция, в ней собраны методы для обработки событий и т.п.
Теперь что касается объекта player. Он создан и им можно управлять, вызывая методы, как в панели управления в html — кнопочки.
Источник: art-ucoz.ru