Исключительный фон при воспроизведении видео

Я использую html5 видео-элемент намного больше. Я хотел бы уменьшить фон моей страницы, когда пользователь нажимает на воспроизведение видео. Когда они нажимают Pause или заканчивают видео, я хочу, чтобы экран отключил тусклость.Исключительный фон при воспроизведении видео

У меня есть этот div на моей странице, который установлен на display: none Он не отображается на странице, когда он загружается, но я недостаточно хорошо знаком с Javascript, чтобы заставить его делать то, что я хочу.

Здесь находится div на моей странице, который устанавливает тусклость.

<div id="overlay" style="display:none;position:fixed;width:100%;height:100%;top:0;left:0;opacity:0.6;"></div>

видео HTML

<div class="col-md-6"> 
    <div id="introRight"> 
     <video poster="img/WhoWeAre.jpg" preload="auto" controls> 
     <source src="video/WhoWeAre_HI.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="video/WhoWeAre_HI.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="video/WhoWeAre_HI.webm" type='video/webm; codecs="vp8, vorbis"'> 
     </video> 
    </div> <!-- end introRight --> 
</div>

источник

2016-07-25 user3786102

$('video').on('play', function(e) { 
    $("#overlay").show(); 
}, true); 

$('video').on('pause', function(e) { 
$("#overlay").hide(); 
}, true); 

$('video').on('ended', function() { 
    $("#overlay").hide(); 
});

Может быть что-то вроде того, что описано выше?

источник

2016-07-25 19:22:26

Во-первых, вам нужно будет идентифицировать media events, в котором вы нуждаетесь. Кажется, что playing и suspend - это то, что вы ищете.

Во-вторых, во время воспроизведения, вы хотите установить свой фон в зависимости от обстоятельств ... если вы только необходимости установить фон для тела:

function dimBackground() { 
    //dim background, alternatively, you can add a className 
    document.querySelector('body').style.backgroundColor = '#333'; 
} 

function undimBackground() { 
    // remove assigned property, fallback to stylesheet 
    delete document.querySelector('body').style.backgroundColor; 
}

здесь, вы можете создать обработчики событий для медиа-плеер на странице ...

var player = document.getElementById('MyVideoElementId'); 
// or 
var player = document.querySelector('.MyContainer video'); 

//subscribe to events 
player.addEventListener('playing', dimBackground); 
player.addEventListener('suspend', undimBackground);

Примечание: Это будет работать только для современных браузеров, использующих <video> элемент. Старые браузеры не поддерживают это, и события будут отличаться для игроков резервного копирования. addEventListener требует IE9 или более поздних версий браузера, все современные браузеры поддерживают это.

источник

2016-07-25 19:27:33 Tracker1

Вы можете проверить:

$("video").on('play',function(){ 
    $("#overlay").show(); 
}); 

$("video").on('pause',function(){ 
    $("#overlay").hide(); 
}); 

$("video").on('ended',function(){ 
    $("#overlay").hide(); 
});

Но вы должны добавить цвет фона для #overlay, чтобы затемнить фон. Morover вы можете установить Z-индекс для наложения, которое ниже, чем видео, чтобы убедиться, что видео всегда на высоте:

#overlay{ 
    background-color: #000; 
    z-index: 0; 
} 
#video{ 
    z-index: 999 
}

https://jsfiddle.net/ptvsovw7/3/

источник

2016-07-25 19:29:18 mxlse

Исключительный фон при воспроизведении видео

ответ

Смежные вопросы