fix fullscreen video on click

This commit is contained in:
Adrien Beudin 2017-06-04 21:54:04 +02:00
parent c4ddefd45a
commit 95358281ef
6 changed files with 24 additions and 28 deletions

View File

@ -79,18 +79,16 @@ $('audio').mediaelementplayer({
});
{% endif %}
var video = $("video");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
function goFullscreen(id) {
var element = document.getElementById(id);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
$(function() {
$("img.lazy").lazyload({

View File

@ -9,7 +9,7 @@
<section class="bordered-picture baguette" style="position: relative;">
<div class="caption">
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video>
{% if caption %}

View File

@ -12,7 +12,7 @@
{% set format = settings.ffmpeg.extension %}
{{ video.copy() }}
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video>
{% if caption %}

View File

@ -62,18 +62,16 @@ $(document).ready(function(){
$('.parallax').parallax();
});
var video = $("video.lazy");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
function goFullscreen(id) {
var element = document.getElementById(id);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
{% if gallery.audio_enabled %}
$('audio').mediaelementplayer({

View File

@ -12,7 +12,7 @@
<div class="bordered-picture baguette caption">
{% if video %}
<img class="responsive-img lazy z-depth-2" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
<video class="lazy responsive-video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video>
{% else %}

View File

@ -12,7 +12,7 @@
{% set format = settings.ffmpeg.extension %}
{{ video.copy() }}
<img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video>
{% if caption %}