prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

full picture video

Browse Source
This commit is contained in:
Adrien Beudin 2016-05-02 09:52:10 +02:00
parent 7235c09e66
commit bbeeac535c
8 changed files with 98 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
prosopopee/prosopopee.py
View File

@ -64,7 +64,7 @@ class Video(object):
}
warning("Generation", source)
if options.get("resize"):
command = "ffmpeg {loglevel} -i {source} {resize} -vframes 1 -y {target}".format(**ffmpeg_switches)
command = "ffmpeg {loglevel} -i {source} {resolution} -vframes 1 -y {target}".format(**ffmpeg_switches)
os.system(command)
else:
command = "ffmpeg {loglevel} -i {source} {resolution} {preselect} {bitrate} -pass 1 -an {format} -y {target}".format(**ffmpeg_switches)

39
prosopopee/themes/exposure/static/css/style-page.css
View File

@ -348,6 +348,13 @@ a.google {
height: auto;
}
.full-picture video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
.bordered-picture video {
width: 77%;
margin-left: 11.5%;
@ -362,3 +369,35 @@ a.google {
margin-bottom: 40px;
margin-top: 40px;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
background-color: rgba(0, 0, 0, .4);
width: 100%;
height: 100%;
display: flex;
color: white;
align-items: center;
justify-content: center;
text-align: center;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}

4
prosopopee/themes/exposure/templates/sections/bordered-picture.html
View File

@ -10,8 +10,8 @@
{% endif %}
{% if video %}
<section class="bordered-picture baguette" style="position: relative;">
<img class="lazy" src="{{ video.generate_thumbnail("600") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<img class="lazy" src="{{ video.generate_thumbnail("2000") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% else %}

29
prosopopee/themes/exposure/templates/sections/full-picture.html
View File

@ -1,5 +1,33 @@
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% else %}
{% set image = Image(section.image) %}
{{ image.copy() }}
{% endif %}
{% if video %}
<section class="full-picture">
<div class="video-container">
{% if section.text %}
<div class="title-container">
<div class="headline">
<h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2>
{% if section.text.date_end %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }} to {{ section.text.date_end.strftime("%d %B %Y") }}</div>
{% else %}
{% if section.text.date %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %}
{% endif %}
</div>
</div>
{% endif %}
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
<img class="lazy" src="{{ video.generate_thumbnail("2000") }}">
</div>
</section>
{% else %}
<section class="full-picture" style="background: transparent url('{{ image }}') no-repeat scroll center top / cover;">
{% if section.text %}
<div class="picture-text">
@ -16,3 +44,4 @@
</div>
{% endif %}
</section>
{% endif %}

10
prosopopee/themes/material/static/css/styles.css
View File

@ -150,3 +150,13 @@ div#bg-section {
.pictures-group .row {
margin-top: 20px
}
.parallax video {
position: absolute;
z-index: 0;
bottom: 0;
}
.parallax video.fillWidth {
width: 100%;
}

2
prosopopee/themes/material/templates/gallery-index.html
View File

@ -44,7 +44,7 @@ $(document).ready(function(){
$('.parallax').parallax();
});
var video = $("#video");
var video = $("video.lazy");
video.on('click', function(e){
var vid = video[0];
vid.play();

4
prosopopee/themes/material/templates/sections/bordered-picture.html
View File

@ -10,8 +10,8 @@
{% endif %}
<div class="bordered-picture baguette caption">
{% if video %}
<img class="lazy" src="{{ video.generate_thumbnail("600") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<img class="lazy" src="{{ video.generate_thumbnail("2000") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% else %}

15
prosopopee/themes/material/templates/sections/full-picture.html
View File

@ -1,7 +1,20 @@
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% else %}
{% set image = Image(section.image) %}
{{ image.copy() }}
{% endif %}
<div class="parallax-container z-depth-2 valign-wrapper">
<div class="parallax"><img class="responsive-img" src="{{ image }}"></div>
<div class="parallax">
{% if video %}
<img class="lazy" src="{{ video.generate_thumbnail("2000") }}">
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% else %}
<img class="responsive-img" src="{{ image }}">
{% endif %}
</div>
{% if section.text %}
<div class="parallax-tittle white-text">
<h1>{{ section.text.title }}</h1>