start audio support
This commit is contained in:
Adrien Beudin
parent
bdf07177ad
commit
2f657c92c9
@ -37,6 +37,12 @@ SETTINGS = {
|
|||||||
"audio": "libvorbis",
|
"audio": "libvorbis",
|
||||||
"video": "libvpx",
|
"video": "libvpx",
|
||||||
"other": "-qmin 10 -qmax 42 -maxrate 500k -bufsize 1500k"
|
"other": "-qmin 10 -qmax 42 -maxrate 500k -bufsize 1500k"
|
||||||
|
},
|
||||||
|
"ffmpeg_audio": {
|
||||||
|
"binary": "ffmpeg",
|
||||||
|
"loglevel": "error",
|
||||||
|
"format": "mp3",
|
||||||
|
"audio": "libmp3lame"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,6 +119,55 @@ class Video(object):
|
|||||||
def __repr__(self):
|
def __repr__(self):
|
||||||
return self.name
|
return self.name
|
||||||
|
|
||||||
|
class Audio(object):
|
||||||
|
base_dir = Path()
|
||||||
|
target_dir = Path()
|
||||||
|
|
||||||
|
def __init__(self, options):
|
||||||
|
error(SETTINGS["ffmpeg"] is not False, "I couldn't find a binary to convert audio and I ask to do so, abort")
|
||||||
|
|
||||||
|
# assuming string
|
||||||
|
if not isinstance(options, dict):
|
||||||
|
options = {"name": options}
|
||||||
|
# used for caching, if it's modified -> regenerate
|
||||||
|
self.options = SETTINGS["ffmpeg_audio"].copy()
|
||||||
|
self.options.update(options)
|
||||||
|
|
||||||
|
@property
|
||||||
|
def name(self):
|
||||||
|
return self.options["name"]
|
||||||
|
|
||||||
|
def ffmpeg(self, source, target, options):
|
||||||
|
if not CACHE.needs_to_be_generated(source, target, options):
|
||||||
|
okgreen("Skipped", source + " is already generated")
|
||||||
|
return
|
||||||
|
|
||||||
|
ffmpeg_switches = {
|
||||||
|
"source": source,
|
||||||
|
"target": target,
|
||||||
|
"binary": "%s" % options["binary"],
|
||||||
|
"format": ".%s" % options["format"],
|
||||||
|
"loglevel": "-loglevel %s" % options["loglevel"],
|
||||||
|
"audio": "-c:a %s" % options["audio"],
|
||||||
|
}
|
||||||
|
|
||||||
|
warning("Generation", source)
|
||||||
|
|
||||||
|
command = "{binary} {loglevel} -i {source} {audio} -y {target}{format}".format(**ffmpeg_switches)
|
||||||
|
print(command)
|
||||||
|
error(os.system(command) == 0, "%s command failed" % ffmpeg_switches["binary"])
|
||||||
|
|
||||||
|
CACHE.cache_picture(source, target, options)
|
||||||
|
|
||||||
|
def copy(self):
|
||||||
|
print self.base_dir
|
||||||
|
source, target = self.base_dir.joinpath(self.name), self.target_dir.joinpath(self.name)
|
||||||
|
options = self.options.copy()
|
||||||
|
self.ffmpeg(source, target, options)
|
||||||
|
return ""
|
||||||
|
|
||||||
|
def __repr__(self):
|
||||||
|
return self.name
|
||||||
|
|
||||||
class Image(object):
|
class Image(object):
|
||||||
base_dir = ""
|
base_dir = ""
|
||||||
@ -189,7 +244,6 @@ class Image(object):
|
|||||||
def __repr__(self):
|
def __repr__(self):
|
||||||
return self.name
|
return self.name
|
||||||
|
|
||||||
|
|
||||||
def get_settings():
|
def get_settings():
|
||||||
error(Path("settings.yaml").exists(), "I can't find a "
|
error(Path("settings.yaml").exists(), "I can't find a "
|
||||||
"settings.yaml in the current working directory")
|
"settings.yaml in the current working directory")
|
||||||
@ -356,6 +410,9 @@ def build_gallery(settings, gallery_settings, gallery_path, template):
|
|||||||
Video.base_dir = Path(".").joinpath(gallery_path)
|
Video.base_dir = Path(".").joinpath(gallery_path)
|
||||||
Video.target_dir = Path(".").joinpath("build", gallery_path)
|
Video.target_dir = Path(".").joinpath("build", gallery_path)
|
||||||
|
|
||||||
|
Audio.base_dir = Path(".").joinpath(gallery_path)
|
||||||
|
Audio.target_dir = Path(".").joinpath("build", gallery_path)
|
||||||
|
|
||||||
template_to_render = page_template if gallery_settings.get("static") else gallery_index_template
|
template_to_render = page_template if gallery_settings.get("static") else gallery_index_template
|
||||||
|
|
||||||
html = template_to_render.render(
|
html = template_to_render.render(
|
||||||
@ -363,6 +420,7 @@ def build_gallery(settings, gallery_settings, gallery_path, template):
|
|||||||
gallery=gallery_settings,
|
gallery=gallery_settings,
|
||||||
Image=Image,
|
Image=Image,
|
||||||
Video=Video,
|
Video=Video,
|
||||||
|
Audio=Audio,
|
||||||
link=gallery_path,
|
link=gallery_path,
|
||||||
name=gallery_path.split('/', 1)[-1]
|
name=gallery_path.split('/', 1)[-1]
|
||||||
).encode("Utf-8")
|
).encode("Utf-8")
|
||||||
|
|||||||
658
prosopopee/themes/exposure/static/css/mediaelementplayer.css
Normal file
658
prosopopee/themes/exposure/static/css/mediaelementplayer.css
Normal file
@ -0,0 +1,658 @@
|
|||||||
|
div.audio-player {
|
||||||
|
width: 450px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #28b67e;
|
||||||
|
}
|
||||||
|
.audio-player h2 {
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ececec;
|
||||||
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
|
||||||
|
padding: 2px 0 0 10px;
|
||||||
|
}
|
||||||
|
/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
|
||||||
|
Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
|
||||||
|
.mejs__offscreen {
|
||||||
|
clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */
|
||||||
|
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__container {
|
||||||
|
position: relative;
|
||||||
|
font-family: "Helvetica", Arial, serif;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
text-indent: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__container * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide native play button from iOS to favor plugin button */
|
||||||
|
.mejs__container video::-webkit-media-controls-start-playback-button {
|
||||||
|
display: none !important;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__fill-container,
|
||||||
|
.mejs__fill-container .mejs__container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__fill-container {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__container:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__iframe-overlay {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__embed,
|
||||||
|
.mejs__embed body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__fullscreen {
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__container-fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__container-fullscreen .mejs__mediaelement,
|
||||||
|
.mejs__container-fullscreen video {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Start: LAYERS */
|
||||||
|
.mejs__background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__mediaelement {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__poster {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-size: contain;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root .mejs__poster-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__poster-img {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.mejs__layer {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__overlay-play {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__overlay-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin: -40px 0 0 -40px;
|
||||||
|
background: url("mejs-controls.svg") no-repeat;
|
||||||
|
background-position: 0 -39px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__overlay:hover > .mejs__overlay-button {
|
||||||
|
background-position: -80px -39px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__overlay-loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin: -40px 0 0 -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__overlay-loading-bg-img {
|
||||||
|
display: block;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: transparent url("mejs-controls.svg") -160px -40px no-repeat;
|
||||||
|
-webkit-animation: mejs-loading-spinner 1s linear infinite;
|
||||||
|
-moz-animation: mejs-loading-spinner 1s linear infinite;
|
||||||
|
animation: mejs-loading-spinner 1s linear infinite;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes mejs-loading-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes mejs-loading-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mejs-loading-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: LAYERS */
|
||||||
|
|
||||||
|
/* Start: CONTROL BAR */
|
||||||
|
.mejs__controls {
|
||||||
|
position: absolute;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__button,
|
||||||
|
.mejs__time,
|
||||||
|
.mejs__time-rail {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__button > button {
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 10px 6px;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border: 0;
|
||||||
|
background: transparent url("mejs-controls.svg");
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* :focus for accessibility */
|
||||||
|
.mejs__button > button:focus {
|
||||||
|
outline: dotted 1px #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__container-keyboard-inactive a,
|
||||||
|
.mejs__container-keyboard-inactive a:focus,
|
||||||
|
.mejs__container-keyboard-inactive button,
|
||||||
|
.mejs__container-keyboard-inactive button:focus,
|
||||||
|
.mejs__container-keyboard-inactive [role=slider],
|
||||||
|
.mejs__container-keyboard-inactive [role=slider]:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: CONTROL BAR */
|
||||||
|
|
||||||
|
/* Start: Time (Current / Duration) */
|
||||||
|
.mejs__time {
|
||||||
|
color: #fff;
|
||||||
|
display: block;
|
||||||
|
height: 24px;
|
||||||
|
width: auto;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 16px 6px 0 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: Time (Current / Duration) */
|
||||||
|
|
||||||
|
/* Start: Play/Pause/Stop */
|
||||||
|
.mejs__play > button {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__pause > button {
|
||||||
|
background-position: -20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__replay > button {
|
||||||
|
background-position: -280px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: Play/Pause/Stop */
|
||||||
|
|
||||||
|
/* Start: Progress Bar */
|
||||||
|
.mejs__time-rail {
|
||||||
|
direction: ltr;
|
||||||
|
width: 200px;
|
||||||
|
padding-top: 10px;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-total,
|
||||||
|
.mejs__time-buffering,
|
||||||
|
.mejs__time-loaded,
|
||||||
|
.mejs__time-current,
|
||||||
|
.mejs__time-handle,
|
||||||
|
.mejs__time-float,
|
||||||
|
.mejs__time-float-current,
|
||||||
|
.mejs__time-float-corner,
|
||||||
|
.mejs__time-marker {
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-total {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-buffering {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||||
|
background-size: 15px 15px;
|
||||||
|
animation: buffering-stripes 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes buffering-stripes {
|
||||||
|
from {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 30px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-loaded {
|
||||||
|
background: rgba(255, 255, 255, .3);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-current {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-handle {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
|
width: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: solid 2px #333;
|
||||||
|
top: -2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-float {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
background: #eee;
|
||||||
|
width: 36px;
|
||||||
|
height: 17px;
|
||||||
|
border: solid 1px #333;
|
||||||
|
top: -26px;
|
||||||
|
margin-left: -18px;
|
||||||
|
text-align: center;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-float-current {
|
||||||
|
margin: 2px;
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__time-float-corner {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
border: solid 5px #eee;
|
||||||
|
border-color: #eee transparent transparent transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
top: 15px;
|
||||||
|
left: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__long-video .mejs__time-float {
|
||||||
|
width: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__long-video .mejs__time-float-current {
|
||||||
|
width: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__long-video .mejs__time-float-corner {
|
||||||
|
left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__broadcast {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: Progress Bar */
|
||||||
|
|
||||||
|
/* Start: Fullscreen */
|
||||||
|
.mejs__fullscreen-button > button {
|
||||||
|
background-position: -80px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__unfullscreen > button {
|
||||||
|
background-position: -100px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: Fullscreen */
|
||||||
|
|
||||||
|
/* Start: Mute/Volume */
|
||||||
|
.mejs__mute > button {
|
||||||
|
background-position: -60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__unmute > button {
|
||||||
|
background-position: -40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__volume-button {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__volume-button > .mejs__volume-slider {
|
||||||
|
display: none;
|
||||||
|
height: 115px;
|
||||||
|
width: 25px;
|
||||||
|
background: rgba(50, 50, 50, 0.7);
|
||||||
|
border-radius: 0;
|
||||||
|
top: -115px;
|
||||||
|
left: 5px;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__volume-button:hover {
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__volume-total {
|
||||||
|
position: absolute;
|
||||||
|
left: 11px;
|
||||||
|
top: 8px;
|
||||||
|
width: 2px;
|
||||||
|
height: 100px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__volume-current {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__volume-handle {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 100%;
|
||||||
|
width: 16px;
|
||||||
|
height: 6px;
|
||||||
|
margin: 0 0 -3px -7px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
cursor: ns-resize;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__horizontal-volume-slider {
|
||||||
|
height: 36px;
|
||||||
|
width: 56px;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__horizontal-volume-total {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 16px;
|
||||||
|
width: 50px;
|
||||||
|
height: 8px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: rgba(50, 50, 50, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__horizontal-volume-current {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__horizontal-volume-handle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: Mute/Volume */
|
||||||
|
|
||||||
|
/* Start: Track (Captions and Chapters) */
|
||||||
|
.mejs__captions-button, .mejs__chapters-button {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-button > button {
|
||||||
|
background-position: -140px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__chapters-button > button {
|
||||||
|
background-position: -302px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
right: -51px;
|
||||||
|
width: 85px;
|
||||||
|
background: rgba(50, 50, 50, 0.7);
|
||||||
|
border: solid 1px transparent;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__chapters-button > .mejs__chapters-selector {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-selector-list, .mejs__chapters-selector-list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
list-style-type: none !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item {
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
list-style-type: none !important;
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover {
|
||||||
|
background-color: rgb(200, 200, 200) !important;
|
||||||
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-selector-input, .mejs__chapters-selector-input {
|
||||||
|
clear: both;
|
||||||
|
float: left;
|
||||||
|
margin: 3px 3px 0 5px;
|
||||||
|
position: absolute;
|
||||||
|
left: -1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-selector-label, .mejs__chapters-selector-label {
|
||||||
|
width: 55px;
|
||||||
|
float: left;
|
||||||
|
padding: 4px 0 0 0;
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-selected, .mejs__chapters-selected {
|
||||||
|
color: rgba(33, 248, 248, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-translations {
|
||||||
|
font-size: 10px;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-layer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-layer a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-layer[lang=ar] {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-position {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-position-hover {
|
||||||
|
bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mejs__captions-text, .mejs__captions-text * {
|
||||||
|
padding: 0;
|
||||||
|
background: rgba(20, 20, 20, 0.5);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End: Track (Captions and Chapters) */
|
||||||
114
prosopopee/themes/exposure/static/css/mejs-controls.svg
Normal file
114
prosopopee/themes/exposure/static/css/mejs-controls.svg
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="120px"
|
||||||
|
viewBox="0 0 400 120" style="enable-background:new 0 0 400 120;" xml:space="preserve">
|
||||||
|
<g id="controls">
|
||||||
|
<g id="play">
|
||||||
|
<path d="M16.31,9.48a.56.56,0,0,1,0,1l-11.38,7c-.47.29-.85.07-.85-.48V3c0-.55.38-.77.85-.48Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="pause">
|
||||||
|
<g>
|
||||||
|
<rect x="23" y="1.01" width="4.2" height="16" rx="1" ry="1" style="fill: #fff"/>
|
||||||
|
<rect x="32.8" y="1.01" width="4.2" height="16" rx="1" ry="1" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="fullscreen">
|
||||||
|
<g id="enter">
|
||||||
|
<path d="M80.83,2.38a1,1,0,0,1,1-1h5.41c.55,0,.68.32.29.71l-6,6c-.39.39-.71.26-.71-.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M80.83,18.17a1,1,0,0,0,1,1h5.41c.55,0,.68-.32.29-.71l-6-6c-.39-.39-.71-.26-.71.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M98.63,2.38a1,1,0,0,0-1-1H92.21c-.55,0-.68.32-.29.71l6,6c.39.39.71.26.71-.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M98.63,18.17a1,1,0,0,1-1,1H92.21c-.55,0-.68-.32-.29-.71l6-6c.39-.39.71-.26.71.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="exit">
|
||||||
|
<g>
|
||||||
|
<path d="M112.53,6a1,1,0,0,0,1,1h4.1c.55,0,.68-.32.29-.71l-4.68-4.68c-.39-.39-.71-.26-.71.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M105.43,7a1,1,0,0,0,1-1V1.88c0-.55-.32-.68-.71-.29L101,6.27c-.39.39-.26.71.29.71Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M106.43,14.07a1,1,0,0,0-1-1h-4.1c-.55,0-.68.32-.29.71l4.68,4.68c.39.39.71.26.71-.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M113.53,13.07a1,1,0,0,0-1,1v4.1c0,.55.32.68.71.29l4.68-4.68c.39-.39.26-.71-.29-.71Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="volume">
|
||||||
|
<g id="unmuted">
|
||||||
|
<path d="M66.8,6.77a3.51,3.51,0,0,1-1.8.6H61.85a1,1,0,0,0-1,1V14.1a1,1,0,0,0,1,1H65a6.28,6.28,0,0,1,1,0,8.5,8.5,0,0,0,.81.63l3.54,2.6c.44.33.81.14.81-.41V4.5c0-.55-.36-.73-.8-.4Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M73.72,3.5s3.95-.81,3.87,7.73S73.72,19,73.72,19" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 1.5px"/>
|
||||||
|
<path d="M72.43,7.38S75.06,7,75,11.23s-2.58,3.86-2.58,3.86" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 1.5px"/>
|
||||||
|
</g>
|
||||||
|
<g id="muted">
|
||||||
|
<path d="M46.8,6.77a3.51,3.51,0,0,1-1.8.6H41.85a1,1,0,0,0-1,1V14.1a1,1,0,0,0,1,1H45a6.28,6.28,0,0,1,1,0,8.5,8.5,0,0,0,.81.63l3.54,2.6c.44.33.81.14.81-.41V4.5c0-.55-.36-.73-.8-.4Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<line x1="52.83" y1="6.98" x2="58.22" y2="12.36" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 2px"/>
|
||||||
|
<line x1="52.83" y1="12.36" x2="58.22" y2="6.98" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 2px"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="closed_captions">
|
||||||
|
<path d="M128.53,9.58c-6.17-4.21-6.46,7.77,0,3.92" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff"/>
|
||||||
|
<path d="M135.06,9.58c-6.17-4.21-6.46,7.77,0,3.92" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff"/>
|
||||||
|
<path d="M122,4.35h15.69V17.43H122ZM120.68,3V18.73H139V3Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="jumpforward">
|
||||||
|
<path d="M192,3.16l-4.33,2.16V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M194.73,3.16,190.4,5.32V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M189.83,3.16a8.15,8.15,0,0,0-8.16,8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||||
|
<path d="M181.68,10.83A8.15,8.15,0,0,0,189.83,19" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||||
|
<path d="M189.46,19a8.15,8.15,0,0,0,8.16-8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||||
|
</g>
|
||||||
|
<g id="skipback">
|
||||||
|
<path d="M162.52,10.65a8.15,8.15,0,0,0,8.16,8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||||
|
<path d="M170.2,18.8a8.15,8.15,0,0,0,8.16-8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||||
|
<path d="M178.36,11a8.15,8.15,0,0,0-8.16-8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||||
|
<path d="M166.42,3.16l4.32,2.16V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M163.7,3.16,168,5.32V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<rect x="141.17" y="3.01" width="18" height="14" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
<path d="M146.19,14.78a2.69,2.69,0,0,1-2.14-1A3.87,3.87,0,0,1,144.17,9c.51-.56,2-1.65,4.64.16l-.56.83c-1.43-1-2.62-1.09-3.34-.31a2.89,2.89,0,0,0-.08,3.47c.7.86,1.92.83,3.45-.08l.51.86A5.13,5.13,0,0,1,146.19,14.78Z" transform="translate(0.17 -0.99)" style="fill: #231f20"/>
|
||||||
|
<path d="M153.73,14.78a2.69,2.69,0,0,1-2.14-1A3.87,3.87,0,0,1,151.71,9c.51-.56,2-1.65,4.64.16l-.56.83c-1.43-1-2.62-1.09-3.34-.31a2.89,2.89,0,0,0-.08,3.47c.7.86,1.92.83,3.45-.08l.51.86A5.13,5.13,0,0,1,153.73,14.78Z" transform="translate(0.17 -0.99)" style="fill: #231f20"/>
|
||||||
|
</g>
|
||||||
|
<g id="settings">
|
||||||
|
<path d="M218.46,10.38a1.35,1.35,0,0,0-1-1.24l-1.85-.46a.7.7,0,0,1-.46-1.1l1-1.64A1.35,1.35,0,0,0,216,4.36h0a1.35,1.35,0,0,0-1.56-.19l-1.64,1a.7.7,0,0,1-1.1-.46l-.46-1.85a1.35,1.35,0,0,0-1.24-1h0a1.35,1.35,0,0,0-1.24,1l-.46,1.85a.7.7,0,0,1-1.1.46l-1.64-1a1.35,1.35,0,0,0-1.56.19h0a1.35,1.35,0,0,0-.19,1.56l1,1.64a.7.7,0,0,1-.46,1.1l-1.85.46a1.35,1.35,0,0,0-1,1.24h0a1.35,1.35,0,0,0,1,1.24l1.85.46a.7.7,0,0,1,.46,1.1l-1,1.64a1.35,1.35,0,0,0,.19,1.56h0a1.35,1.35,0,0,0,1.56.19l1.64-1a.7.7,0,0,1,1.1.46l.46,1.85a1.35,1.35,0,0,0,1.24,1h0a1.35,1.35,0,0,0,1.24-1l.46-1.85a.7.7,0,0,1,1.1-.46l1.64,1a1.35,1.35,0,0,0,1.56-.19h0a1.35,1.35,0,0,0,.19-1.56l-1-1.64a.7.7,0,0,1,.46-1.1l1.85-.46a1.35,1.35,0,0,0,1-1.24Zm-5.68,0A2.82,2.82,0,1,1,210,7.54,2.82,2.82,0,0,1,212.78,10.36Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="stop">
|
||||||
|
<rect x="223" y="2.84" width="14" height="14" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="loop">
|
||||||
|
<g id="loop_on">
|
||||||
|
<path d="M254.05,7.52a5.72,5.72,0,1,1-8.7-.27l-1.62-1.62a8,8,0,1,0,11.94.26Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M251.13,4.36a.72.72,0,0,1,.85-.85l5.52.77c.54.08.67.46.28.84l-5,5c-.39.39-.77.26-.84-.28Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="loop_off" style="opacity: 0.5">
|
||||||
|
<path d="M274.21,7.77a5.72,5.72,0,1,1-8.7-.27l-1.62-1.62a8,8,0,1,0,11.94.26Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M271.29,4.61a.72.72,0,0,1,.85-.85l5.52.77c.54.08.67.46.28.84l-5,5c-.39.39-.77.26-.84-.28Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="replay">
|
||||||
|
<path d="M298.64,10.54a.79.79,0,0,1-1.1.64l-4.86-1.82c-.51-.19-.55-.58-.07-.85l6.18-3.57c.48-.27.79-.06.7.49Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M290,17.08a6.22,6.22,0,0,1-2.9-.71,5.94,5.94,0,0,1-3.2-5.24,6.11,6.11,0,0,1,11.87-1.89l.1-.15L298,10.15a8.1,8.1,0,0,0-16.12,1,7.93,7.93,0,0,0,4.26,7,8.22,8.22,0,0,0,3.83.95,8.13,8.13,0,0,0,6.57-3.32l-1.8-.93A6.14,6.14,0,0,1,290,17.08Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="chapters">
|
||||||
|
<rect x="302" y="3.01" width="3" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
<rect x="307" y="3.01" width="15" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
<rect x="302" y="8.01" width="3" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
<rect x="307" y="8.01" width="15" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
<rect x="302" y="13.01" width="3" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
<rect x="307" y="13.01" width="15" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="big_play">
|
||||||
|
<g id="big_play_opaque">
|
||||||
|
<path d="M60.1,78a1.06,1.06,0,0,1,0,2L29.82,97.49c-1,.55-1.73.1-1.73-1v-35c0-1.1.78-1.55,1.73-1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M2.33,80a37.5,37.5,0,1,1,37.5,37.5A37.5,37.5,0,0,1,2.33,80Z" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 5px;opacity: 0.75;isolation: isolate"/>
|
||||||
|
</g>
|
||||||
|
<g id="big_play_hover">
|
||||||
|
<path d="M140.1,78a1.06,1.06,0,0,1,0,2L109.82,97.49c-1,.55-1.73.1-1.73-1v-35c0-1.1.78-1.55,1.73-1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||||
|
<path d="M82.33,80a37.5,37.5,0,1,1,37.5,37.5A37.5,37.5,0,0,1,82.33,80Z" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 5px"/>
|
||||||
|
</g>
|
||||||
|
<g id="loading">
|
||||||
|
<circle cx="201.88" cy="47.13" r="8.13" style="fill: #fff"/>
|
||||||
|
<circle cx="233.88" cy="79.01" r="5" style="fill: #fff;opacity: 0.4"/>
|
||||||
|
<circle cx="201.88" cy="110.88" r="6" style="fill: #fff;opacity: 0.6000000000000001"/>
|
||||||
|
<circle cx="170.13" cy="79.01" r="7" style="fill: #fff;opacity: 0.8"/>
|
||||||
|
<circle cx="178.25" cy="56.34" r="7.5" style="fill: #fff;opacity: 0.9"/>
|
||||||
|
<circle cx="226.33" cy="56.09" r="4.5" style="fill: #fff;opacity: 0.30000000000000004"/>
|
||||||
|
<circle cx="225.75" cy="102.76" r="5.5" style="fill: #fff;opacity: 0.5"/>
|
||||||
|
<circle cx="178.25" cy="102.76" r="6.5" style="fill: #fff;opacity: 0.7000000000000001"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.6 KiB |
36
prosopopee/themes/exposure/static/js/mediaelement-and-player.min.js
vendored
Normal file
36
prosopopee/themes/exposure/static/js/mediaelement-and-player.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -7,6 +7,7 @@
|
|||||||
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
||||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||||
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
|
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
|
||||||
|
<link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css" media="screen,projection"/>
|
||||||
<!--Let browser know website is optimized for mobile-->
|
<!--Let browser know website is optimized for mobile-->
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
{% if gallery.description %}
|
{% if gallery.description %}
|
||||||
@ -40,6 +41,7 @@
|
|||||||
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
|
||||||
<script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
|
||||||
<script type="text/javascript" src="../static/js/picturefill.min.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../static/js/picturefill.min.js" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
@ -54,6 +56,17 @@ $(function() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('audio').mediaelementplayer({
|
||||||
|
alwaysShowControls: true,
|
||||||
|
features: ['playpause','progress','volume'],
|
||||||
|
audioVolume: 'horizontal',
|
||||||
|
audioWidth: 450,
|
||||||
|
audioHeight: 30,
|
||||||
|
iPadUseNativeControls: true,
|
||||||
|
iPhoneUseNativeControls: true,
|
||||||
|
AndroidUseNativeControls: true
|
||||||
|
});
|
||||||
|
|
||||||
var video = $("video.lazy");
|
var video = $("video.lazy");
|
||||||
video.on('click', function(e){
|
video.on('click', function(e){
|
||||||
var vid = video[0];
|
var vid = video[0];
|
||||||
|
|||||||
11
prosopopee/themes/exposure/templates/sections/audio.html
Normal file
11
prosopopee/themes/exposure/templates/sections/audio.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{% if section.image.type == "audio" %}
|
||||||
|
{% set audio = Audio(section.image) %}
|
||||||
|
{% set caption = section.text %}
|
||||||
|
{{ audio.copy() }}
|
||||||
|
{% endif %}
|
||||||
|
<div class="audio-player">
|
||||||
|
<h2>{% if caption %}{{ caption }}{% else %}{{ audio }}{% endif %}</h2>
|
||||||
|
<audio controls>
|
||||||
|
<source src="{{ audio }}.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user