Форум

Grasss · #1 (**permalink**) 03.11.2017, 02:29

Доброго времени суток! Подскажите как реализовать на сайте воспроизведение видео по расписанию?
На сервере будет храниться видеофайл, который должен ежедневно воспроизводиться в одно и тоже время.
Как быть с прокруткой видео до определённого момента? Например если видео началось в 17:00, а пользователь зашел на сайт в 17:20, тогда он должен смотреть видео начиная с 20-той минуты, как это реализовать средствами php и javascript?

В принципе как вариант это можно реализовать используя видео с ютуба http://youtube . com/embed/xFa2_PVMeDQ?start=30
get параметр (start=) отвечает за воспроизведение видео с указанной секунды, тогда понадобится скрипт, который будет отсчитывать время с начала трансляции (с 17:00) и дописывать его в параметр (start=) и тогда если посетитель зайдет на сайт в 17:20 видео начнется именно с 20 минуты.

Uladzimircharniauski · #2 (**permalink**) 03.11.2017, 08:07

>Как видео может начаться до захода пользователя на сайт?
Наверное оно будет начинаться независимо от входа пользователя.

Grasss · #3 (**permalink**) 03.11.2017, 12:10

Видео автоматически воспроизводится с 17:00 до 19:00 это что-то на подобии вебинара

Rasy · #4 (**permalink**) 03.11.2017, 14:44

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>

Grasss · #5 (**permalink**) 03.11.2017, 16:52

Уже что-то похожее

У меня на сайте стоит таймер в котором можно менять часовую зону, в данном случае трансляция планируется по московскому времени это 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)

Вот теперь кажись всё.

Rasy · #6 (**permalink**) 03.11.2017, 17:03

Сообщение от Grasss

Не могли бы вы еще добавить минуты в ваш скрипт?

Зачем? Видео будет воспроизводиться по времени.
Человек зашел в 17:00 - видео проигрывается сначала
Зашел в 17:05 - c пятой минуты.
Зашел в 17:20 - с двадцатой минуты.
Cмещение времени позже допишу.

Grasss · #7 (**permalink**) 03.11.2017, 17:13

Благодарю, вы сегодня сделали чудо)))
А можно добавить команду воспроизведения при открытии блока и стоп после скрытия?
Минуты тоже нужны, если я захочу перенести время трансляции на 17:30 или видео будет длиться не 2 часа, а полтора.

Rasy · #8 (**permalink**) 03.11.2017, 23:35

Сообщение от Grasss

И чтобы время устанавливалось с учетом смещения UTC+03:00 по Москве (offset: +3)

Это не нужно. Если пользователь зайдет в Сиднее в 17:40, а начало запланировано на 17:30, то перемотается 10 минут ролика. Тем времен в Москве будет утро.

Сообщение от Grasss

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

В модальное окно нужно добавить див <div id="player"></div>, и удалить текущий ифрейм. Скрипт сам добавит его.

Сообщение от Grasss

А можно добавить команду воспроизведения при открытии блока и стоп после скрытия?

Да. В функциях onPlayerReady, stopVideo дописать логику.

Сообщение от Grasss

Минуты тоже нужны, если я захочу перенести время трансляции на 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>

Grasss · #9 (**permalink**) 05.11.2017, 00:47

Огромное спасибо за помощь

Rasy · #10 (**permalink**) 05.11.2017, 00:53

Grasss,

Форум

Справочник

Discord чат

Курсы javascript