PHP . SU Программирование на PHP, MySQL и другие веб-технологии
Поиск в теме | Версия для печати
leshiy
Отправлено: 06 Июня, 2020 - 13:31:25
188 Июнь 2008
0 раз(а)
Пытаюсь сделать свой видеоплеер но не получается как в известных видеоплеерах скрыть и показать панель управления, если при воспроизведении видео двинулась мышь в области плеера то панель управления показывается и запускается 3-х секундный отсчет через который панель управления снова скрывается, но если таймер уже идет и видео остановлено то отсчет почему то не останавливается.
CODE (
javascript ):
скопировать код в буфер обмена
document.getElementById ( 'player' ) .addEventListener ( 'click' , function ( ) {
var time;
glplayer.onmousemove = function ( e) {
if ( videoPlayer.paused === false ) {
//панель управления видна
let target = e.target .closest ( '#control' ) ;
if ( ! target) {
time = setTimeout( function ( ) {
//панель управления скрыта
} , 3000)
} else { clearTimeout( time) ;
}
}
}
if ( videoPlayer.paused ) {
//панель управления скрыта
videoPlayer.play ( ) ;
} else {
//clearTimeout(time); почему то не работает
videoPlayer.pause ( ) ;
//панель управления видна
}
} , false ) ;
LIME
Отправлено: 06 Июня, 2020 - 21:56:28
10732 Нояб. 2010
322 раз(а)
тактак стоп
у тебя же черным по английскому написано
если плеер на паузе то играть
иначе на паузу
тоесть если не на паузе то на паузу
если на паузе то отменить паузу
ничего не смущает в логике?
рекомендую научиться дебажить в хроме с точками останова
https://learn[dot]javascript[dot]ru/devtools
отказ от ответственности: код не запускал и даже внимательно не смотрел
сразу офигел от логики
Vladimir Kheifets
Отправлено: 07 Июня, 2020 - 08:09:12
872 Март 2017
37 раз(а)
LIME пишет: тактак стоп
у тебя же черным по английскому написано
если плеер на паузе то играть
иначе на паузу
тоесть если не на паузе то на паузу
если на паузе то отменить паузу
ничего не смущает в логике?
рекомендую научиться дебажить в хроме с точками останова
https://learn[dot]javascript[dot]ru/devtools
отказ от ответственности: код не запускал и даже внимательно не смотрел
сразу офигел от логики
Код тоже не запускал, а только посмотрел.
Спойлер (Отобразить ) CODE (
javascript ):
скопировать код в буфер обмена //--------------------------------------------------------------------
document.getElementById ( 'player' ) .addEventListener ( 'click' , function ( ) {
var time;
glplayer.onmousemove = function ( e)
{
if ( videoPlayer.paused === false )
{
//панель управления видна
let target = e.target .closest ( '#control' ) ;
if ( ! target)
{
time = setTimeout( function ( )
{
//панель управления скрыта
} , 3000) ;
}
else
{
clearTimeout( time) ;
}
}
}
//-----------------------------------------
if ( videoPlayer.paused )
{
//панель управления скрыта
videoPlayer.play ( ) ;
}
else
{
//clearTimeout(time); почему то не работает
videoPlayer.pause ( ) ;
//панель управления видна
}
} , false ) ;
Увидел, что по первому клику по элементу 'player',(Отредактировано автором: 07 Июня, 2020 - 08:28:16)
leshiy
Отправлено: 07 Июня, 2020 - 11:39:38
188 Июнь 2008
0 раз(а)
let target =e.target.closest('#control');//#cntrol это и есть панель управления.
CODE (
html ):
скопировать код в буфер обмена <div id = "glplayer" ><div id = "control" ></ div ><video poster= "/3910.jpg" id = "player" playsinline= "" src = "/11755.mp4" ></ video></ div >
leshiy
Отправлено: 07 Июня, 2020 - 14:06:36
188 Июнь 2008
0 раз(а)
Вот код.Обнаружилось еще и то что setTimeout походу не отключается и во время движения мыши.
CODE (
html ):
скопировать код в буфер обмена
<!doctype html>
<html lang = "ru" >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
<meta name = "viewport" content = "width=device-width, initial-scale=1" / >
<style >
#glplayer{position:relative}
#player{width:100%}
.controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
.none{display:none}
</ style >
</ head >
<body >
<br >
<div id = "glplayer" >
<div id = "control" class = "controls" ></ div >
<video id = "player" src = "https://atuin.ru/demo/plyr/854.mp4" ></ video>
</ div >
<script >
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
document.getElementById('player').addEventListener('click',function(){
control.setAttribute('class','none');
var time;
document.getElementById('glplayer').onmousemove = function (e){
if(videoPlayer.paused===false){
control.setAttribute('class','controls');
let target =e.target.closest('#control');
if(!target){
time = setTimeout(function () {
control.setAttribute('class','none');
}, 3000)
}else{clearTimeout(time);
}
}
}
if(videoPlayer.paused) {
control.setAttribute('class','none');
videoPlayer.play();
} else {
//clearTimeout(time); почему то не работает
videoPlayer.pause();
control.setAttribute('class','controls');
}
},false);</ script >
</ body >
</ html >
(Добавление) LIME пишет: ничего не смущает в логике?
Vladimir Kheifets
Отправлено: 08 Июня, 2020 - 11:58:39
872 Март 2017
37 раз(а)
leshiy пишет: Вот код.Обнаружилось еще и то что setTimeout походу не отключается и во время движения мыши.
CODE (
html ):
скопировать код в буфер обмена
<!doctype html>
<html lang = "ru" >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
<meta name = "viewport" content = "width=device-width, initial-scale=1" / >
<style >
#glplayer{position:relative}
#player{width:100%}
.controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
.none{display:none}
</ style >
</ head >
<body >
<br >
<div id = "glplayer" >
<div id = "control" class = "controls" ></ div >
<video id = "player" src = "https://atuin.ru/demo/plyr/854.mp4" ></ video>
</ div >
<script >
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
document.getElementById('player').addEventListener('click',function(){
control.setAttribute('class','none');
var time;
document.getElementById('glplayer').onmousemove = function (e){
if(videoPlayer.paused===false){
control.setAttribute('class','controls');
let target =e.target.closest('#control');
if(!target){
time = setTimeout(function () {
control.setAttribute('class','none');
}, 3000)
}else{clearTimeout(time);
}
}
}
if(videoPlayer.paused) {
control.setAttribute('class','none');
videoPlayer.play();
} else {
//clearTimeout(time); почему то не работает
videoPlayer.pause();
control.setAttribute('class','controls');
}
},false);</ script >
</ body >
</ html >
(Добавление)
LIME пишет: ничего не смущает в логике?
В коде логика такая:
если плеер на паузе то play()
если нет то pause()
нормальная логика!!!
Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена <!doctype html>
<html lang = "ru" >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
<meta name = "viewport" content = "width=device-width, initial-scale=1" / >
<style >
#glplayer{position:relative}
#player{width:100%}
.controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
.none{display:none}
</ style >
</ head >
<body >
<br >
<div id = "glplayer" >
<div id = "control" class = "controls" ></ div >
<video id = "player" src = "http://beautiful-puppies.de/video/20200331120740.mp4" ></ video>
</ div >
<script >
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
document.getElementById('player').addEventListener('click',function()
{
control.setAttribute('class','none');
var time;
document.getElementById('glplayer').onmousemove = function (e)
{
console.log("videoPlayer.paused:"+videoPlayer.paused);
if(videoPlayer.paused===false)
{
control.setAttribute('class','controls');
let target = e.target.closest('#control');
console.log("target:"+target);
if(!target)
{
time = setTimeout(function () {
control.setAttribute('class','none');}, 3000);
console.log("setTimeout");
}
else
{
clearTimeout(time);
console.log("clearTimeout");
}
}
}
if(videoPlayer.paused)
{
control.setAttribute('class','none');
videoPlayer.play();
}
else
{
//clearTimeout(time); почему то не работает
videoPlayer.pause();
control.setAttribute('class','controls');
}
},false);
</ script >
</ body >
</ html >
Спойлер (Отобразить ) Цитата: new 1.html:30 videoPlayer.paused:false
let target = e.target.closest('#control'); target=null Цитата: Кликнули #control скрылась, мышью двинули #control появилась и запустился setTimeout на 3сек. после чего #control опять скрылась.
Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена <!doctype html>
<html lang = "ru" >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
<meta name = "viewport" content = "width=device-width, initial-scale=1" / >
<style >
#glplayer{position:relative}
#player{height:100vh}
.controls{
position:absolute;
height:50px;
width:100%;
bottom:0;
background-color:red;
cursor:pointer;
}
.none{display:none}
</ style >
</ head >
<body >
<br >
<div id = "glplayer" >
<div id = "control" class = "controls" ></ div >
<video id = "player" src = "http://beautiful-puppies.de/video/20200331120740.mp4" ></ video>
</ div >
<script >
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
control.addEventListener('click',function()
{
//Кликнули #control панель скрылась
control.setAttribute('class','none');
}
,false);
videoPlayer.addEventListener('click',function()
{
control.setAttribute('class','none');
var time;
document.getElementById('glplayer').onmousemove = function (e)
{
console.log("videoPlayer.paused:"+videoPlayer.paused);
if(videoPlayer.paused===false)
{
//let target = this.target.closest('#control');
control_class = control.getAttribute('class');
console.log("control_class:"+control_class);
//мышью двинули ecли #control не было видно, то #control появился
if(control_class=="none")
{
control.setAttribute('class','controls');
//запустился setTimeout на 3сек. после чего #control опять скрылась.
console.log("setTimeout");
time = setTimeout(function ()
{
control.setAttribute('class','none');
//clearTimeout(time);
console.log("clearTimeout");
}, 3000);
}
}
}
if(videoPlayer.paused)
{
control.setAttribute('class','none');
videoPlayer.play();
}
else
{
videoPlayer.pause();
control.setAttribute('class','controls');
}
},false);
</ script >
</ body >
</ html >
#player{width:100%} вытягивает видео по высоте за пределы рабочей области экрана.#player{height:100vh} , но это уже другая тема.
leshiy
Отправлено: 08 Июня, 2020 - 16:56:21
188 Июнь 2008
0 раз(а)
1.Поменял ваши стили на свои старые и в хроме все нормуль, а вот с вашими наоборот видео растягивается на весь браузер и даже за его пределы.
2.В моем реальном плеере очень большой css (let target =e.target.closest('#control'); работает.Здесь не работает потому что у #control нет элементов) и поэтому я сделал упрощенный вариант.
3.Если видео показывает и вы двинули мышку и появилась панель управления и сразу же нажать на паузу то вот тут clearTimeout(time) и не срабатывает и через 3сек. она исчезает.
(Отредактировано автором: 08 Июня, 2020 - 17:05:48)
leshiy
Отправлено: 08 Июня, 2020 - 20:06:08
188 Июнь 2008
0 раз(а)
Сделал рабочий пример со style и плеером, но только с Play и Pause.
Спойлер (Отобразить ) <!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//leshiy-game.ru/111/style.css" /> </head>
<body>
<br>
<div id="glplayer" class="plyr plyr--full-ui plyr--video plyr--html5 plyr--paused plyr--stopped plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled"><div id="control" class="plyr__controls"><button class="plyr__controls__item plyr__control" type="button" data-plyr="play" aria-label="Play" id="video-hud__action"><svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-pause"><svg id="plyr-pause"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zm6 0c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"></path></svg></use></svg><svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-play"><svg id="plyr-play"><path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path></svg></use></svg><span class="label--pressed plyr__sr-only">Pause</span><span class="label--not-pressed plyr__sr-only">Play</span></button><div class="plyr__time" id="currtime">00:00</div><div class="plyr__controls__item plyr__progress__container"><div class="plyr__progress"><input type="range" min="0" max="100" step="0.01" value="0" role="slider" id="plyr-seek"><progress class="plyr__progress__buffer" min="0" max="100" value="27.4357168016907" role="progressbar" aria-hidden="true">% buffered</progress><span class="plyr__tooltip"></span></div></div><div class="plyr__controls__item plyr__time--duration plyr__time" aria-label="Duration" id="dtime">03:47</div><div class="plyr__controls__item plyr__volume"><button type="button" class="plyr__control plyr__control--pressed" id="butvol" data-plyr="mute"><svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-muted"><svg id="plyr-muted"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.97 7-1.143-.601L3.786 6.008z"></path></svg></use></svg><svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-volume"><svg id="plyr-volume"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"></path><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-. 992-.319-2.005-1.522-3.208a.909. 909 0 0 0-1.316 0zm-7.496.726H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.97 7-1.143-.601L3.786 6.008z"></path></svg></use></svg><span class="label--pressed plyr__sr-only">Unmute</span><span class="label--not-pressed plyr__sr-only">Mute</span></button><input data-plyr="volume" type="range" min="0" max="100" value="0" autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" id="plyr-vol" style="--value:0%;" aria-valuetext="100.0%"></div><div class="plyr__controls__item plyr__menu" hidden=""><div class="plyr__menu__container" id="plyr-settings-8770" hidden=""><div><div id="plyr-settings-8770-home"><div role="menu"><button type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true" hidden=""><span>Captions<span class="plyr__menu__value">Disabled</span></span></button><button type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true" hidden=""><span>Quality<span class="plyr__menu__value">854p</span></span></button><button type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true" hidden=""><span>Speed<span class="plyr__menu__value">undefined</span></span></button></div></div><div id="plyr-settings-8770-captions" hidden=""><button type="button" class="plyr__control plyr__control--back"><span aria-hidden="true">Captions</span><span class="plyr__sr-only">Go back to previous menu</span></button><div role="menu"></div></div><div id="plyr-settings-8770-quality" hidden=""><button type="button" class="plyr__control plyr__control--back"><span aria-hidden="true">Quality</span><span class="plyr__sr-only">Go back to previous menu</span></button><div role="menu"></div></div><div id="plyr-settings-8770-speed" hidden=""><button type="button" class="plyr__control plyr__control--back"><span aria-hidden="true">Speed</span><span class="plyr__sr-only">Go back to previous menu</span></button><div role="menu"></div></div></div></div></div><button class="plyr__controls__item plyr__control" type="button" data-plyr="fullscreen"><svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-exit-fullscreen"></use></svg><svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-enter-fullscreen"></use></svg><span class="label--pressed plyr__sr-only">Exit fullscreen</span><span class="label--not-pressed plyr__sr-only">Enter fullscreen</span></button></div><div class="plyr__video-wrapper plyr__video-wrapper--fixed-ratio"><video id="player" src="
http://beautiful-puppies[dot]de/vide[dot][dot][dot];/div><div class="plyr__captions"></div><button type="button" class="plyr__control plyr__control--overlaid" data-plyr="play" aria-label="Play"><svg role="presentation" focusable="false"><use xlink:href="#plyr-play"><svg id="plyr-play"><path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path></svg></use></svg></button></div>
<script>
document.getElementById('player').addEventListener('click',function(){
var videoPlayer = document.getElementById('player');
var glplayer=document.getElementById('glplayer');
var timeid;
glplayer.onmousemove = function (e){
if(videoPlayer.paused===false){
clearInterval(timeid);
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr__tab-focus plyr--playing');
let target =e.target.closest('#control');
if(!target){
timeid = setInterval(function () {
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr--playing plyr--hide-controls plyr__playing');
}, 3000)
}else{clearInterval(timeid);
}
}
}
if(videoPlayer.paused) {
document.querySelector('.plyr__controls__item').setAttribute('class','plyr__controls__item plyr__control plyr__control--pressed');
videoPlayer.play();
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr--playing plyr--hide-controls plyr__tab-focus');
} else {
clearInterval(timeid);
document.querySelector('.plyr__controls__item').setAttribute('class','plyr__controls__item plyr__control');
videoPlayer.pause();
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr__tab-focus plyr--paused');
}
},false);</script>
</body>
</html>
но проблему с паузой так и не решил.Помоему таймер не отключается в 36 строке.
Vladimir Kheifets
Отправлено: 08 Июня, 2020 - 21:09:37
872 Март 2017
37 раз(а)
leshiy пишет: Сделал рабочий пример со style и плеером, но только с Play и Pause.
Спойлер (Отобразить ) <!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//leshiy-game.ru/111/style.css" /> </head>
<body>
<br>
<div id="glplayer" class="plyr plyr--full-ui plyr--video plyr--html5 plyr--paused plyr--stopped plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled"><div id="control" class="plyr__controls"><button class="plyr__controls__item plyr__control" type="button" data-plyr="play" aria-label="Play" id="video-hud__action"><svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-pause"><svg id="plyr-pause"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zm6 0c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"></path></svg></use></svg><svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-play"><svg id="plyr-play"><path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path></svg></use></svg><span class="label--pressed plyr__sr-only">Pause</span><span class="label--not-pressed plyr__sr-only">Play</span></button><div class="plyr__time" id="currtime">00:00</div><div class="plyr__controls__item plyr__progress__container"><div class="plyr__progress"><input type="range" min="0" max="100" step="0.01" value="0" role="slider" id="plyr-seek"><progress class="plyr__progress__buffer" min="0" max="100" value="27.4357168016907" role="progressbar" aria-hidden="true">% buffered</progress><span class="plyr__tooltip"></span></div></div><div class="plyr__controls__item plyr__time--duration plyr__time" aria-label="Duration" id="dtime">03:47</div><div class="plyr__controls__item plyr__volume"><button type="button" class="plyr__control plyr__control--pressed" id="butvol" data-plyr="mute"><svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-muted"><svg id="plyr-muted"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.97 7-1.143-.601L3.786 6.008z"></path></svg></use></svg><svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-volume"><svg id="plyr-volume"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"></path><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-. 992-.319-2.005-1.522-3.208a.909. 909 0 0 0-1.316 0zm-7.496.726H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.97 7-1.143-.601L3.786 6.008z"></path></svg></use></svg><span class="label--pressed plyr__sr-only">Unmute</span><span class="label--not-pressed plyr__sr-only">Mute</span></button><input data-plyr="volume" type="range" min="0" max="100" value="0" autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" id="plyr-vol" style="--value:0%;" aria-valuetext="100.0%"></div><div class="plyr__controls__item plyr__menu" hidden=""><div class="plyr__menu__container" id="plyr-settings-8770" hidden=""><div><div id="plyr-settings-8770-home"><div role="menu"><button type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true" hidden=""><span>Captions<span class="plyr__menu__value">Disabled</span></span></button><button type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true" hidden=""><span>Quality<span class="plyr__menu__value">854p</span></span></button><button type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true" hidden=""><span>Speed<span class="plyr__menu__value">undefined</span></span></button></div></div><div id="plyr-settings-8770-captions" hidden=""><button type="button" class="plyr__control plyr__control--back"><span aria-hidden="true">Captions</span><span class="plyr__sr-only">Go back to previous menu</span></button><div role="menu"></div></div><div id="plyr-settings-8770-quality" hidden=""><button type="button" class="plyr__control plyr__control--back"><span aria-hidden="true">Quality</span><span class="plyr__sr-only">Go back to previous menu</span></button><div role="menu"></div></div><div id="plyr-settings-8770-speed" hidden=""><button type="button" class="plyr__control plyr__control--back"><span aria-hidden="true">Speed</span><span class="plyr__sr-only">Go back to previous menu</span></button><div role="menu"></div></div></div></div></div><button class="plyr__controls__item plyr__control" type="button" data-plyr="fullscreen"><svg class="icon--pressed" role="presentation" focusable="false"><use xlink:href="#plyr-exit-fullscreen"></use></svg><svg class="icon--not-pressed" role="presentation" focusable="false"><use xlink:href="#plyr-enter-fullscreen"></use></svg><span class="label--pressed plyr__sr-only">Exit fullscreen</span><span class="label--not-pressed plyr__sr-only">Enter fullscreen</span></button></div><div class="plyr__video-wrapper plyr__video-wrapper--fixed-ratio"><video id="player" src="
http://beautiful-puppies[dot]de/vide[dot][dot][dot];/div><div class="plyr__captions"></div><button type="button" class="plyr__control plyr__control--overlaid" data-plyr="play" aria-label="Play"><svg role="presentation" focusable="false"><use xlink:href="#plyr-play"><svg id="plyr-play"><path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path></svg></use></svg></button></div>
<script>
document.getElementById('player').addEventListener('click',function(){
var videoPlayer = document.getElementById('player');
var glplayer=document.getElementById('glplayer');
var timeid;
glplayer.onmousemove = function (e){
if(videoPlayer.paused===false){
clearInterval(timeid);
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr__tab-focus plyr--playing');
let target =e.target.closest('#control');
if(!target){
timeid = setInterval(function () {
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr--playing plyr--hide-controls plyr__playing');
}, 3000)
}else{clearInterval(timeid);
}
}
}
if(videoPlayer.paused) {
document.querySelector('.plyr__controls__item').setAttribute('class','plyr__controls__item plyr__control plyr__control--pressed');
videoPlayer.play();
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr--playing plyr--hide-controls plyr__tab-focus');
} else {
clearInterval(timeid);
document.querySelector('.plyr__controls__item').setAttribute('class','plyr__controls__item plyr__control');
videoPlayer.pause();
glplayer.setAttribute('class','plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled plyr__tab-focus plyr--paused');
}
},false);</script>
</body>
</html>
но проблему с паузой так и не решил.Помоему таймер не отключается в 36 строке.
Исправьте, пожалуйста, спойлер. Код не возможно читать.
Про стили. У меня ноутбук с экраном 15". С Вашим стилем я не вижу контольной панели в видимой область плайера. Необходимо прописывать в css @media screen ... для разных типов устройств и орентаций экранов. Иначе Ваш плейер сможете увидеть только Вы на своём компьютере .
Vladimir Kheifets
Отправлено: 09 Июня, 2020 - 17:27:15
872 Март 2017
37 раз(а)
leshiy пишет: 1.А что с кодом то не так?
Вы вставили код в спойлер , но вместо html поствили quote.
Получилось нечитаемо
См, скриншот ниже
Прикреплено изображение (Нажмите для увеличения) (Отредактировано автором: 09 Июня, 2020 - 17:28:38)
leshiy
Отправлено: 09 Июня, 2020 - 19:28:46
188 Июнь 2008
0 раз(а)
Да все там читаемо.На вашем скрине видно только часть кода с отображением самого плеера.Единственное это адрес видео файла.
Вставьте любой или http://beautiful-puppies.de/video/20200331120740.mp4
(Отредактировано автором: 09 Июня, 2020 - 20:07:53)
Vladimir Kheifets
Отправлено: 11 Июня, 2020 - 18:04:56
872 Март 2017
37 раз(а)
leshiy пишет: Да все там читаемо.На вашем скрине видно только часть кода с отображением самого плеера.Единственное это адрес видео файла.
Добрый день!
Цитата: Да все там читаемо
Ну прям, как в Алисе в стране, читать на лету, что на банках написано
Очень хотелось, разобраться..., вставил, посмотрел в Хроме, увидел см. скриншот.
Прикреплено изображение (Нажмите для увеличения) (Отредактировано автором: 11 Июня, 2020 - 18:06:26)
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« JavaScript & VBScript »
Все гости форума могут просматривать этот раздел.
Powered by ExBB FM 1.0 RC1. InvisionExBB
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Без описания
