Browse Source

Prise en charge de la video responsive avec le player mediaelement

on factorise le js d'init commun a l'audio et la vido dans un js externe insere inline au moins une fois dans une page qui contient un ou plusieurs documents audio/video
le js d'init ne craint pas d'etre insere plusieurs fois, ce qui peut arriver si on charge des bouts de page en ajax par exemple
3.1 v2.9.3
cedric@yterium.com 8 years ago
parent
commit
dd5e04fe41
  1. 2
      .gitattributes
  2. 32
      javascript/mejs_init.js
  3. 38
      modeles/audio.html
  4. 1
      modeles/emb_mp4.html
  5. 66
      modeles/video.html
  6. 2
      paquet.xml

2
.gitattributes vendored

@ -36,6 +36,7 @@ inc/verifier_document_mode_vignette.php -text
inc/vignette.php -text
javascript/jquery.multifile.js -text
javascript/medias_edit.js -text
javascript/mejs_init.js -text
lang/medias.xml -text
lang/medias_ar.php -text
lang/medias_ast.php -text
@ -160,6 +161,7 @@ modeles/document_desc.html -text
modeles/document_desc_fonctions.php -text
modeles/emb.html -text
modeles/emb_fonctions.php -text
modeles/emb_mp4.html -text
modeles/image.html -text
modeles/img.html -text
modeles/text.html -text

32
javascript/mejs_init.js

@ -0,0 +1,32 @@
var mejsloader;
(function(){
var mejs_counter = 0;
function mejs_init(){
(function($) {
jQuery("audio.mejs,video.mejs").each(function(){
//console.log(this);
mejs_counter++;
var id = "mejs-" + (jQuery(this).attr('data-id')) + "-" + mejs_counter;
var autoplay = jQuery(this).attr('autoplay');
jQuery(this).attr('id',id);
var options = jQuery(this).attr('data-mejsoptions');
if (options)
eval("options="+options+";");
else
options = {};
new MediaElementPlayer('#'+id,jQuery.extend(options,{
"success": function(media) {
if (autoplay) media.play();
}
}));
})
})(jQuery);
}
if (typeof mejsloader=="undefined"){
mejsloader = jQuery.getScript(mejspath,function(){
mejs_init(); // init immediate des premiers players dans la page
jQuery(mejs_init); // init exhaustive de tous les players
onAjaxLoad(mejs_init); // init lors d'un load ajax
});
}
})();

38
modeles/audio.html

@ -14,40 +14,8 @@
</div>
[<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>]
[<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
<script>/*<![CDATA[*/
var mejsloader;
(function(){
var mejs_counter = 0;
function mejs_init(){
(function($) {
jQuery("audio.mejs").each(function(){
console.log(this);
mejs_counter++;
var id = "mejs-" + (jQuery(this).attr('data-id')) + "-" + mejs_counter;
var autoplay = jQuery(this).attr('autoplay');
jQuery(this).attr('id',id);
var options = jQuery(this).attr('data-mejsoptions');
if (options)
eval("options="+options+";");
else
options = {};
new MediaElementPlayer('#'+id,jQuery.extend(options,{
"success": function(media) {
if (autoplay) media.play();
}
}));
})
})(jQuery);
}
if (typeof mejsloader=="undefined"){
mejsloader = jQuery.getScript("[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]",function(){
mejs_init(); // init immediate des premiers players dans la page
jQuery(mejs_init); // init exhaustive de tous les players
onAjaxLoad(mejs_init); // init lors d'un load ajax
});
}
})();
/*]]>*/</script>
<link rel="stylesheet" href="[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]" />
[<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
(#INCLURE{javascript/mejs_init.js}|compacte{js}|unique)/*\]\]>*/</script>]
[<link rel="stylesheet" href="(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp|unique)" />]
</div>
</BOUCLE_tous>

1
modeles/emb_mp4.html

@ -0,0 +1 @@
<INCLURE{fond=modeles/video,env} />

66
modeles/video.html

@ -5,34 +5,38 @@
- #GET{hauteur} et #GET{largeur} correspondent prioritairement a #ENV,
puis #LARGEUR/HAUTEUR sauf si il y a un controleur
]
#SET{hauteur,#ENV{hauteur,#HAUTEUR}} #SET{largeur,#ENV{largeur,#LARGEUR}}
[(#REM)
Si la taille est zero, mettre une valeur par defaut 320x240
][(#GET{hauteur}|plus{#GET{largeur}}|?{'',
[(#SET{largeur,320})][(#SET{hauteur,240})]
})]
[(#REM)
Pour quicktime il faut ajouter 16 pixels en hauteur
cf. http://article.gmane.org/gmane.comp.web.spip.zone/9231/match=quicktime
][(#EXTENSION|=={mov}|?{#SET{hauteur,#GET{hauteur}|plus{16}}})]
[(#ENV{controls}=={PlayButton}|?{#SET{hauteur,25},''})][
(#ENV{controls}=={PlayButton}|?{#SET{largeur,40},''})][
(#ENV{controls}=={PositionSlider}|?{#SET{hauteur,25},''})][
(#ENV{controls}=={PositionSlider}|?{#SET{largeur,#GET{largeur}|moins{40}},''})
][(#INCLUS|=={embed}|?{[(#ENV{controls,''}|non)
<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|non)[width:(#GET{largeur}|max{120})px]']>
]})
]
<object width='#GET{largeur}' height='#GET{hauteur}'>
<param name='movie' value='#URL_DOCUMENT' />
<param name='src' value='#URL_DOCUMENT' />
[(#ENV*|env_to_params)]
<embed src='#URL_DOCUMENT' [(#ENV*|env_to_attributs)] width='#GET{largeur}' height='#GET{hauteur}'></embed></object>
[<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>][<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]</div>
</BOUCLE_tous>
#SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,480}}|max{120}}
#SET{hauteur,#ENV{hauteur, #HAUTEUR|?{#HAUTEUR,300}}|max{75}}
<div class='spip_document_#ID_DOCUMENT spip_document_video spip_documents[ spip_documents_(#ENV{align})]'
style='[(#ENV{align}|match{^(left|right)$}|oui)float:#ENV{align};][width:(#GET{largeur})px]'>
<div class="video-intrinsic-wrapper" style='height:0;width:100%;padding-bottom:[(#GET{hauteur}|div{#GET{largeur}}|mult{100}|round{2})]%;position:relative;'>
<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
<video class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"
data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"[(#CHEMIN{lib/mejs/flashmediaelement.swf}|dirname)/]"[,"loop":(#ENV{loop}|?{true,false})],"videoWidth":"100%"[,videoHeight:"(#ENV{hauteur})"][,startVolume:"(#ENV{volume})"]}'
width="100%"
height="100%"
poster="[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|extraire_attribut{src})]"
controls="controls"
preload="none"
[autoplay="autoplay"(#ENV{autoplay}|oui)]
>
<source type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replace{application/,video/})],#MIME_TYPE})]" src="#FICHIER" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="100%" height="100%" type="application/x-shockwave-flash" data="#CHEMIN{lib/mejs/flashmediaelement.swf}">
<param name="movie" value="#CHEMIN{lib/mejs/flashmediaelement.swf}" />
<param name="flashvars" value="controls=true&file=#FICHIER" />
<!-- Image as a last resort -->
[(#LOGO_DOCUMENT|image_reduire{#GET{largeur},0}|vider_attribut{class}|inserer_attribut{alt,'Impossible de lire la video'})]
</object>
</video>
</div>
</div>
[<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>]
[<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
[<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
(#INCLURE{javascript/mejs_init.js}|compacte{js}|unique)/*\]\]>*/</script>]
[<link rel="stylesheet" href="(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp|unique)" />]
<style>.spip_document_video .me-cannotplay {width:100% !important;height:100% !important;}.spip_document_video .me-cannotplay a {display: block;}</style>
</div>
</BOUCLE_tous>

2
paquet.xml

@ -1,7 +1,7 @@
<paquet
prefix="medias"
categorie="multimedia"
version="2.9.2"
version="2.9.3"
etat="stable"
compatibilite="[3.0.0;3.1.*]"
logo="prive/themes/spip/images/portfolio-32.png"

Loading…
Cancel
Save