Воспроизведение видео на сайте по расписанию.
Доброго времени суток! Подскажите как реализовать на сайте воспроизведение видео по расписанию?
На сервере будет храниться видеофайл, который должен ежедневно воспроизводиться в одно и тоже время. Как быть с прокруткой видео до определённого момента? Например если видео началось в 17:00, а пользователь зашел на сайт в 17:20, тогда он должен смотреть видео начиная с 20-той минуты, как это реализовать средствами php и javascript? В принципе как вариант это можно реализовать используя видео с ютуба http://youtube . com/embed/xFa2_PVMeDQ?start=30 get параметр (start=) отвечает за воспроизведение видео с указанной секунды, тогда понадобится скрипт, который будет отсчитывать время с начала трансляции (с 17:00) и дописывать его в параметр (start=) и тогда если посетитель зайдет на сайт в 17:20 видео начнется именно с 20 минуты. |
>Как видео может начаться до захода пользователя на сайт?
Наверное оно будет начинаться независимо от входа пользователя. |
Видео автоматически воспроизводится с 17:00 до 19:00 это что-то на подобии вебинара
|
Воспроизведение видео на сайте по расписанию
Grasss,
С 14:00 до 16:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="player">Воспроизведение видео на сайте по расписанию</div>
<script type="text/javascript"></script>
<script>
var start_hour = 14;
var end_hour = 16;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: 'dwiGTtbo6WM',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var jump = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !jump) {
player.seekTo(getSeconds());
jump = true;
}
}
function stopVideo() {
player.stopVideo();
}
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
function getSeconds() {
if (h >= end_hour && m) return 0;
if (h >= start_hour) {
var time_now = d;
var time_start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), start_hour, 0);
var time_end = new Date(d.getFullYear(), d.getMonth(), d.getDate(), end_hour, 0);
return ((time_end - time_start) - (time_end - time_now)) / 1000;
}
}
</script>
</body>
</html>
|
Уже что-то похожее :thanks:
У меня на сайте стоит таймер в котором можно менять часовую зону, в данном случае трансляция планируется по московскому времени это UTC+03:00 значит (date:'11/03/2017 14:20:00',offset: +3)
<script class="source" type="text/javascript">
$('.countdown').downCount({date:'11/03/2017 14:20:00',offset: +3},function (){
var delay_window=1000;setTimeout("document.getElementById('vo').style.display='block'",delay_window);
});</script>
<script type="text/javascript">
/**
* downCount: Simple Countdown clock with offset
* Author: Sonny T. <hi@sonnyt.com>, sonnyt.com
*/
(function ($) {
$.fn.downCount = function (options, callback) {
var settings = $.extend({
date: null,
offset: null
}, options);
// Throw error if date is not set
if (!settings.date) {
$.error('Date is not defined.');
}
// Throw error if date is set incorectly
if (!Date.parse(settings.date)) {
$.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
}
// Save container
var container = this;
/**
* Change client's local date to match offset timezone
* @return {Object} Fixed Date object.
*/
var currentDate = function () {
// get client's current date
var date = new Date();
// turn date to utc
var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
// set new Date object
var new_date = new Date(utc + (3600000*settings.offset))
return new_date;
};
/**
* Main downCount function that calculates everything
*/
function countdown () {
var target_date = new Date(settings.date), // set target date
current_date = currentDate(); // get fixed current date
// difference of dates
var difference = target_date - current_date;
// if difference is negative than it's pass the target date
if (difference < 0) {
// stop timer
clearInterval(interval);
if (callback && typeof callback === 'function') callback();
return;
}
// basic math variables
var _second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24;
// calculate dates
var days = Math.floor(difference / _day),
hours = Math.floor((difference % _day) / _hour),
minutes = Math.floor((difference % _hour) / _minute),
seconds = Math.floor((difference % _minute) / _second);
// fix dates so that it will show two digets
days = (String(days).length >= 2) ? days : '0' + days;
hours = (String(hours).length >= 2) ? hours : '0' + hours;
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
// based on the date change the refrence wording
var ref_days = (days === 1) ? 'day' : 'days',
ref_hours = (hours === 1) ? 'hour' : 'hours',
ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
ref_seconds = (seconds === 1) ? 'second' : 'seconds';
// set to DOM
container.find('.days').text(days);
container.find('.hours').text(hours);
container.find('.minutes').text(minutes);
container.find('.seconds').text(seconds);
container.find('.days_ref').text(ref_days);
container.find('.hours_ref').text(ref_hours);
container.find('.minutes_ref').text(ref_minutes);
container.find('.seconds_ref').text(ref_seconds);
};
// start
var interval = setInterval(countdown, 1000);
};
})(jQuery);
</script>
Как только таймер истекает, открывается блок с видео <div id="vo">видеотрансляция</div> за то отвечает команда: var delay_window=1000;setTimeout("document.getElementB yId('vo').style.display='block'",delay_window); Мне нужно, чтобы видео воспроизводилось при открытии блока и останавливалось при скрытии блока, потому что после скрытия оно по прежнему продолжает воспроизводиться в фоновом режиме. =========================== Не могли бы вы еще добавить минуты в ваш скрипт? var start_hour = 14; var start_minute = 20; var end_hour = 16; var end_minute = 20; И чтобы время устанавливалось с учетом смещения UTC+03:00 по Москве (offset: +3) Вот теперь кажись всё. |
Цитата:
Человек зашел в 17:00 - видео проигрывается сначала Зашел в 17:05 - c пятой минуты. Зашел в 17:20 - с двадцатой минуты. Cмещение времени позже допишу. |
Благодарю, вы сегодня сделали чудо)))
А можно добавить команду воспроизведения при открытии блока и стоп после скрытия? Минуты тоже нужны, если я захочу перенести время трансляции на 17:30 или видео будет длиться не 2 часа, а полтора. |
Цитата:
Цитата:
Цитата:
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Воспроизведение видео на сайте по расписанию</title>
</head>
<body>
<div id="player"></div>
<div>
<button type="button" id="start">start</button>
<button type="button" id="stopp">stop</button>
</div>
<script type="text/javascript"></script>
<script>
var start_time = '21:52';
var end_time = '23:52';
start_time = start_time.split(':');
end_time = end_time.split(':');
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: 'dwiGTtbo6WM',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
start.onclick = function() {
event.target.playVideo();
};
}
var jump = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !jump) {
player.seekTo(getSeconds());
jump = true;
}
}
function stopVideo() {
player.stopVideo();
}
stopp.onclick = function() {
stopVideo();
};
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
function getSeconds() {
if (h > end_time[0] || h == end_time[0] && m > end_time[1]) return 0;
if (h >= start_time[0]) {
var time_now = d;
var time_start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), start_time[0], start_time[1]);
var time_end = new Date(d.getFullYear(), d.getMonth(), d.getDate(), end_time[0], end_time[1]);
return ((time_end - time_start) - (time_end - time_now)) / 1000;
}
return 0;
}
</script>
</body>
</html>
|
Огромное спасибо за помощь :thanks:
|
Grasss,
:victory: |
| Часовой пояс GMT +3, время: 11:19. |