Anomalie #4074

Le code de plugin-dist/medias/modeles/video.html , produit un paragraphe de trop et casse le html.

Ajouté par eldk - il y a 4 mois. Mis à jour il y a 3 mois.

Statut:NouveauDébut:11/01/2018
Priorité:NormalEchéance:
Assigné à:-% réalisé:

0%

Catégorie:-
Version cible:-
Resolution: Navigateur:

Description

Le code de plugin-dist/medias/modeles/video.html , produit un paragraphe de trop et casse le html.

Ayant l'option pToBr désactivée, je ne suis pas sur que cela soit le
cas général.

Cependant, une petite remise en forme de plugin-dist/medias/modeles/video.html m'a permis de solutionner cela :

```
diff --git a/squelettes/modeles/video.html
b/squelettes/modeles/video.html
index 9019d44..acf60a8 100644
--- a/squelettes/modeles/video.html
+++ b/squelettes/modeles/video.html
@ -19,8 +19,7 @
poster="[(#LOGO_DOCUMENT{vignette}|image_reduire {#GET{largeur},0}|extraire_attribut{src})]"
controls="controls"
preload="none"

- [autoplay="autoplay"(#ENV{auto
play}|oui)]
- >

+ [autoplay="autoplay"(#ENV{autoplay}|oui)]>

<source
type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replac
e{application/,video/})],#MIME_TYPE})]" src="#FICHIER" />
<!-- Flash fallback for non-HTML5 browsers
without JavaScript -->
<object width="#GET{largeur}" height="#GET{hauteur}"
type="application/x-shockwave-flash"
data="#CHEMIN{lib/mejs/flashmediaelement.swf}">

Cordialement,

Eric

video.html.patch Magnifier - patch pour squelettes/modeles/video.html | plugin-dist/medias/modeles/video.html (987 octets) eldk -, 12/01/2018 13:33

Historique

#1 Mis à jour par eldk - il y a 4 mois

Code de base produit par SPIP 

<div        class='spip_document_2723 spip_document_video spip_documents spip_documents_center'
style='width:320px'>
<div class="video-intrinsic-wrapper" style='height:0;width:100%;padding-bottom:75%;position:relative;'>
<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
<video class="mejs mejs-2723" 
data-id="9fe362b704014cc727a7f3d8f7e1f0bd" 
data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"plugins-dist/medias/lib/mejs/","loop":false,"videoWidth":"100%","videoHeight":"100%"}'
width="100%" 
height="100%" 
poster="" 
controls="controls" 
preload="none" 
<p>                        >
<source type="video/mp4" src="IMG/mp4/le_sens_de_la_vie_monte.mp4" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript --></p>
<object width="320" height="240" type="application/x-shockwave-flash" data="plugins-dist/medias/lib/mejs/flashmediaelement.swf">
<param name="movie" value="plugins-dist/medias/lib/mejs/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&amp;file=IMG/mp4/le_sens_de_la_vie_monte.mp4" />
<!-- Image as a last resort -->
<img itemprop='thumbnail' src='//www.opalesurfcasting.net/local/cache-vignettes/L52xH52/mp4-518da.png?1515341195' width='52' height='52' alt='Impossible de lire la video' />
</object>
</video>
</div>
</div>
<div class='spip_doc_titre'><strong>Extrait video&nbsp;: sens de la vie - Monthy Python - 1983 - Universal</strong></div><script>/*<![CDATA[*/var mejspath='plugins-dist/medias/lib/mejs/mediaelement-and-player.min.js?1508951836',mejscss='plugins-dist/medias/lib/mejs/mediaelementplayer.min.css?1508951836';
var mejsloader; (function(){var a=mejsloader;"undefined"==typeof a&&(mejsloader=a={gs:null,plug:{},css:{},init:null,c:0,cssload:null});a.init||(a.cssload=function(b){if("undefined"==typeof a.css[b]){a.css[b]=!0;var c=document.createElement("link");c.href=b;c.rel="stylesheet";c.type="text/css";document.getElementsByTagName("head")[0].appendChild(c)}},a.init=function(){!0===a.gs&&function(b){jQuery("audio.mejs,video.mejs").not(".done").each(function(){function c(){var e=!0,h;for(h in d.css)a.cssload(d.css[h]);for(var f in d.plugins)"undefined"== typeof a.plug[f]?(e=!1,a.plug[f]=!1,jQuery.getScript(d.plugins[f],function(){a.plug[f]=!0;c()})):0==a.plug[f]&&(e=!1);e&&new MediaElementPlayer("#"+b,jQuery.extend(d.options,{success:function(a){function b(){jQuery(a).closest(".mejs-inner").removeClass(a.paused?"playing":"paused").addClass(a.paused?"paused":"playing")}b();a.addEventListener("play",b,!1);a.addEventListener("playing",b,!1);a.addEventListener("pause",b,!1);a.addEventListener("paused",b,!1);g.attr("autoplay")&&a.play()}}))}var g=jQuery(this).addClass("done"), b;(b=g.attr("id"))||(b="mejs-"+g.attr("data-id")+"-"+a.c++,g.attr("id",b));var d={options:{},plugins:{},css:[]},e,h;for(e in d)if(h=g.attr("data-mejs"+e))d[e]=jQuery.parseJSON(h);c()})}(jQuery)});a.gs||("undefined"!==typeof mejscss&&a.cssload(mejscss),a.gs=jQuery.getScript(mejspath,function(){a.gs=!0;a.init();jQuery(a.init);onAjaxLoad(a.init)}))})();/*]]>*/</script></div></div>
<div        class='spip_document_2723 spip_document_video spip_documents spip_documents_center'
style='width:320px'>
<div class="video-intrinsic-wrapper" style='height:0;width:100%;padding-bottom:75%;position:relative;'>
<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
<video class="mejs mejs-2723" 
data-id="9fe362b704014cc727a7f3d8f7e1f0bd" 
data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"plugins-dist/medias/lib/mejs/","loop":false,"videoWidth":"100%","videoHeight":"100%"}'
width="100%" 
height="100%" 
poster="" 
controls="controls" 
preload="none" 
>
<source type="video/mp4" src="IMG/mp4/le_sens_de_la_vie_monte.mp4" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="plugins-dist/medias/lib/mejs/flashmediaelement.swf">
<param name="movie" value="plugins-dist/medias/lib/mejs/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&amp;file=IMG/mp4/le_sens_de_la_vie_monte.mp4" />
<!-- Image as a last resort -->
<img itemprop='thumbnail' src='//www.opalesurfcasting.net/local/cache-vignettes/L52xH52/mp4-518da.png?1515341195' width='52' height='52' alt='Impossible de lire la video' />
</object>
</video>
</div>
</div>
<div class='spip_doc_titre'><strong>Extrait video&nbsp;: sens de la vie - Monthy Python - 1983 - Universal</strong></div><script>/*<![CDATA[*/var mejspath='plugins-dist/medias/lib/mejs/mediaelement-and-player.min.js?1508951836',mejscss='plugins-dist/medias/lib/mejs/mediaelementplayer.min.css?1508951836';
var mejsloader; (function(){var a=mejsloader;"undefined"==typeof a&&(mejsloader=a={gs:null,plug:{},css:{},init:null,c:0,cssload:null});a.init||(a.cssload=function(b){if("undefined"==typeof a.css[b]){a.css[b]=!0;var c=document.createElement("link");c.href=b;c.rel="stylesheet";c.type="text/css";document.getElementsByTagName("head")[0].appendChild(c)}},a.init=function(){!0===a.gs&&function(b){jQuery("audio.mejs,video.mejs").not(".done").each(function(){function c(){var e=!0,h;for(h in d.css)a.cssload(d.css[h]);for(var f in d.plugins)"undefined"== typeof a.plug[f]?(e=!1,a.plug[f]=!1,jQuery.getScript(d.plugins[f],function(){a.plug[f]=!0;c()})):0==a.plug[f]&&(e=!1);e&&new MediaElementPlayer("#"+b,jQuery.extend(d.options,{success:function(a){function b(){jQuery(a).closest(".mejs-inner").removeClass(a.paused?"playing":"paused").addClass(a.paused?"paused":"playing")}b();a.addEventListener("play",b,!1);a.addEventListener("playing",b,!1);a.addEventListener("pause",b,!1);a.addEventListener("paused",b,!1);g.attr("autoplay")&&a.play()}}))}var g=jQuery(this).addClass("done"), b;(b=g.attr("id"))||(b="mejs-"+g.attr("data-id")+"-"+a.c++,g.attr("id",b));var d={options:{},plugins:{},css:[]},e,h;for(e in d)if(h=g.attr("data-mejs"+e))d[e]=jQuery.parseJSON(h);c()})}(jQuery)});a.gs||("undefined"!==typeof mejscss&&a.cssload(mejscss),a.gs=jQuery.getScript(mejspath,function(){a.gs=!0;a.init();jQuery(a.init);onAjaxLoad(a.init)}))})();/*]]>*/</script></div></div>

#2 Mis à jour par b b il y a 3 mois

Salut, je ne comprends pas ce que tu veux dire par :

Ayant l'option pToBr désactivée, je ne suis pas sur que cela soit le cas général.

Peux-tu préciser ? Quelle version de SPIP est utilisée ?

De plus, peux-tu fournir un patch en tant que document joint à ton message, afin que celui-ci soit lisible ?

#3 Mis à jour par eldk - il y a 3 mois

Bonjour,

Ayant l'option pToBr désactivée, je ne suis pas sur que cela soit le cas général.

Ma version de SPIP : 3.1.7 - Les versions concernées : toutes celles qui utilisent cela : https://core.spip.net/projects/medias/repository/entry/modeles/video.html
https://core.spip.net/projects/medias/repository/entry/modeles/video.html#L23
https://core.spip.net/projects/medias/repository/entry/modeles/video.html#L24

                               autoplay="autoplay"(#ENV{autoplay}|oui)]

                        >
preload="none" 
<p>                        >
<source type="video/mp4" src="IMG/mp4/le_sens_de_la_vie_monte.mp4" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript --></p>

Un paragraphe est inséré à cheval entre la fin de la balise <video> et le <source> avec un ">" qui traîne entre deux et, devrait fermer la balise <video>.
Je ne sais pas si PtoBr corrige cela, je l'ai désactivé. S'il fait bien PtoBr, où met-il son <br /> ? et cela casse t-il le html ?

Concernant le patch :

<div itemprop="associatedMedia" itemscope itemtype="https://schema.org/VideoObject" style="text-align:center">
<meta content="[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|extraire_attribut{src})]" itemprop="thumbnailUrl">
+ <video width="#GET{largeur}"
+ height="#GET{hauteur}"
+ controls="controls"
+ poster="[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|extraire_attribut{src})]"
+ title="#TITRE">
+ <source itemprop="contentUrl" src="#FICHIER" type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replace{application/,video/})],#MIME_TYPE})]"/>
+ </video>
+ <div class="spip_doc_titre" itemprop="name"><strong>[(#TITRE)]</strong></div>
+ <div class="spip_doc_descriptif" itemprop="description">[(#DESCRIPTIF)][(#NOTES)]</div>
</div>
</BOUCLE_tous>

Comment fait-on pour éditer un message ? Le bouton "Modifier" correspond à l'action "ajouter un commentaire" ....

#4 Mis à jour par eldk - il y a 3 mois

Milles excuses .. j'ai valider le champs de désignation du patch en appuyant sur entrée, ce qui a envoyé le commentaire.

Formats disponibles : Atom PDF

Ajouter une image à partir du presse-papier (Taille maximale: 1,25 Mo)