Changes for page Video Macro
Last modified by Ludovic Dubost on 2023/04/25 09:12
From version 3.1
edited by Ludovic Dubost
on 2018/11/30 15:23
on 2018/11/30 15:23
Change comment:
Migrated property [type] from class [XWiki.WikiMacroParameterClass]
To version 6.1
edited by Ludovic Dubost
on 2019/05/20 19:05
on 2019/05/20 19:05
Change comment:
Install extension [org.xwiki.contrib:macro-video/1.14]
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (3 modified, 1 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,42 +1,47 @@ 1 -Example usage :1 +==Example usage== 2 2 3 -{{code}} 4 4 Youtube: 5 5 5 +{{code}} 6 6 {{video url="http://www.youtube.com/watch?v=Titn-yAh74A"/}} 7 +{{/code}} 7 7 9 +{{video url="http://www.youtube.com/watch?v=Titn-yAh74A"/}} 10 + 11 +{{code}} 12 +{{video url="http://www.youtube.com/watch?v=Titn-yAh74A" ratio="16:9"/}} 13 +{{/code}} 14 + 15 +{{video url="http://www.youtube.com/watch?v=Titn-yAh74A" ratio="16:9"/}} 16 + 8 8 Dailymotion: 9 9 19 +{{code}} 10 10 {{video url="http://www.dailymotion.com/video/x9x04h_wiki-et-reseau-social-xwiki-et-blue_tech"/}} 21 +{{/code}} 11 11 23 +{{video url="http://www.dailymotion.com/video/x9x04h_wiki-et-reseau-social-xwiki-et-blue_tech"/}} 24 + 12 12 Vimeo: 13 13 27 +{{code}} 14 14 {{video url="http://vimeo.com/30980990"/}} 29 +{{/code}} 15 15 31 +{{video url="http://vimeo.com/30980990"/}} 32 + 16 16 Attachment: 17 17 35 +{{code}} 18 18 {{video attachment="test-vid.webm"/}} 37 +{{/code}} 19 19 39 +{{video attachment="test-vid.webm"/}} 40 + 20 20 DASH: 21 21 43 +{{code}} 22 22 {{video dash="Space.Page"/}} 23 23 {{/code}} 24 24 25 -Gives: 26 - 27 -Youtube: 28 - 29 -{{video url="http://www.youtube.com/watch?v=Titn-yAh74A"/}} 30 - 31 -Dailymotion: 32 - 33 -{{video url="http://www.dailymotion.com/video/x9x04h_wiki-et-reseau-social-xwiki-et-blue_tech"/}} 34 - 35 -Vimeo: 36 - 37 -{{video url="http://vimeo.com/30980990"/}} 38 - 39 -Attachment: 40 - 41 -{{video attachment="test-vid.webm"/}} 42 - 47 +{{video dash="Space.Page"/}}
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -1,50 +1,48 @@ 1 1 // Configure require.js to use video.js and dash.js (https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md) 2 2 // (https://github.com/Dash-Industry-Forum/dash.js) 3 3 require.config({ 4 - "paths": {5 - "video-js": "$services.webjars.url('video-js/4.11.4/video.js')",6 - "dash-webm": "$services.webjars.url('dash.js/1.4/contrib/webmjs/dash.webm.min.js')",7 - "videojs-dashjs": "$services.webjars.url('dash.js/1.4/contrib/videojs/videojs-tech-dashjs.js')"8 - 4 + 'paths': { 5 + 'video-js': "$services.webjars.url('video-js/4.11.4/video.js')", 6 + 'dash-webm': "$services.webjars.url('dash.js/1.4/contrib/webmjs/dash.webm.min.js')", 7 + 'videojs-dashjs': "$services.webjars.url('dash.js/1.4/contrib/videojs/videojs-tech-dashjs.js')" 8 + } 9 9 }); 10 10 11 -// Load the video-js css file 11 +// Load the video-js css file. 12 12 function loadCss(url) { 13 - "link");14 - "text/css";15 - "stylesheet";16 - 17 - "head")[0].appendChild(link);13 + var link = document.createElement('link'); 14 + link.type = 'text/css'; 15 + link.rel = 'stylesheet'; 16 + link.href = url; 17 + document.getElementsByTagName('head')[0].appendChild(link); 18 18 } 19 19 20 -// Set up DASH player 20 +// Set up DASH player. 21 21 function setupPlayer(videoDashID) { 22 - // If the dash is not supported on the browser, play an flv video 23 - if (videojs.Dashjs.isSupported()) { 24 - // Initalize the video.js player 25 - var myPlayer = videojs(videoDashID, {context:new Webm.di.WebmContext()}); 26 - } 27 - else 28 - { 29 - var flvVideoURL = document.getElementById(videoDashID).getElementsByClassName("flv-video-url")[0].value; 30 - var sourceElement = document.getElementById(videoDashID).getElementsByTagName("source")[0]; 31 - sourceElement.setAttribute("src", flvVideoURL); 32 - sourceElement.setAttribute("type", "video/x-flv"); 33 - videojs(videoDashID); 34 - } 22 + // If the dash is not supported on the browser, play an flv video. 23 + if (videojs.Dashjs.isSupported()) { 24 + // Initalize the video.js player. 25 + var myPlayer = videojs(videoDashID, {context: new Webm.di.WebmContext()}); 26 + } else { 27 + var flvVideoURL = document.getElementById(videoDashID).getElementsByClassName('flv-video-url')[0].value; 28 + var sourceElement = document.getElementById(videoDashID).getElementsByTagName('source')[0]; 29 + sourceElement.setAttribute('src', flvVideoURL); 30 + sourceElement.setAttribute('type', 'video/x-flv'); 31 + videojs(videoDashID); 32 + } 35 35 } 36 36 37 -require(['jquery', 'dash-webm', 'video-js'], function($, dashwebm, videojs){ 38 - loadCss("$services.webjars.url('video-js/4.11.4/video-js.min.css')"); 39 - videojs.options.flash.swf = "$services.webjars.url('video-js/4.11.4/video-js.swf')"; 40 - require(["videojs-dashjs"], function(videojsdash){ 41 - $(function(){ 42 - // Initialize DASH videos 43 - $("video.dashvideo").each(function(index){ 44 - var videoDashID = "dash-video" + index; 45 - $(this).attr("id", videoDashID); 46 - setupPlayer(videoDashID); 47 - }); 35 +require(['jquery', 'dash-webm', 'video-js'], function($, dashwebm, videojs) { 36 + loadCss("$services.webjars.url('video-js/4.11.4/video-js.min.css')"); 37 + videojs.options.flash.swf = "$services.webjars.url('video-js/4.11.4/video-js.swf')"; 38 + require(['videojs-dashjs'], function(videojsdash) { 39 + $(function() { 40 + // Initialize DASH videos. 41 + $('video.dashvideo').each(function(index) { 42 + var videoDashID = 'dash-video' + index; 43 + $(this).attr('id', videoDashID); 44 + setupPlayer(videoDashID); 48 48 }); 49 - }); 46 + }); 47 + }); 50 50 });
- XWiki.WikiMacroClass[0]
-
- Cached
-
... ... @@ -1,0 +1,1 @@ 1 +No - Asynchronous rendering
-
... ... @@ -1,0 +1,1 @@ 1 +No - Macro code
-
... ... @@ -1,7 +1,5 @@ 1 -{{velocity output=false}} 2 - 3 -Compute the URL of the embedded video from the original web URL. 4 - 1 +{{velocity}} 2 +## Compute the URL of the embedded video from the original web URL. 5 5 #set ($url = '') 6 6 #if ($xcontext.macro.params.url.indexOf('dailymotion') != -1) 7 7 ## DailyMotion URLs have the following format: ... ... @@ -34,110 +34,114 @@ 34 34 ## http://vimeo.com/moogaloop.swf?clip_id=<videoId>&show_title=1 35 35 #set ($url = $xcontext.macro.params.url.replaceAll('^.*?//.*?/(.*?)([#?].*|$)', '//player.vimeo.com/video/$1')) 36 36 #end 37 - 38 -Compute the width and height. 39 - 40 40 #set ($width = $xcontext.macro.params.width) 41 41 #set ($height = $xcontext.macro.params.height) 42 - 37 +#set ($embedContainerClass = '') 38 +#set ($embedItemClass = '') 39 +#set ($ratio = '') 40 +## The ratio value is used to compute a bootstrap css class: embed-responsive-16by9. 41 +#if ($xcontext.macro.params.ratio) 42 + #set ($ratio = $xcontext.macro.params.ratio.replace(':', 'by')) 43 + #set ($embedContainerClass = " class='embed-responsive embed-responsive-$ratio'") 44 + #set ($embedItemClass = 'embed-responsive-item') 45 + #set ($width = '100%') 46 + #set ($height = '100%') 47 +#end 48 +#set ($width = "width=$width") 49 +#set ($height = "height=$height") 43 43 {{/velocity}} 44 -{{velocity}} 45 -#if ("$!url" != '') 46 46 47 -{{html wiki="false"}} 48 -#if ($xcontext.macro.params.url.indexOf('google') != -1) 49 - <object width="$!{width}" height="$!{height}" type="application/x-shockwave-flash" data="${url}"><param name="movie" value="${url}"></param><param name="allowFullScreen" value="true"></param></object> 52 +{{velocity}}#if ("$!url" != '') 53 + {{html clean="false"}} 54 + <div$!{embedContainerClass}> 55 + #if ($xcontext.macro.params.url.indexOf('google') != -1) 56 + <object class="$!embedItemClass" $!width $!height type="application/x-shockwave-flash" data="$!url"> 57 + <param name="movie" value="$!url"></param> 58 + <param name="allowFullScreen" value="true"></param> 59 + </object> 60 + #else 61 + <iframe class="$!embedItemClass" src="$!url" $!width $!height frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 62 + #end 63 + </div> 64 + {{/html}} 50 50 #else 51 - <iframe src="${url}" width="$!{width}" height="$!{height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 52 -#end 53 -{{/html}} 54 - 55 -#else 56 - #if ("$!xcontext.macro.params.attachment" != '') 57 - ## read a video attachement 58 - #set($videoAttachmentName = $xcontext.macro.params.attachment) 59 - #set($videoAttachmentDoc = $doc) 60 - #set($videoAttachmentRef = $xcontext.macro.params.reference) 61 - #if("$!videoAttachmentRef" != '' && $services.security.authorization.hasAccess('view', $videoAttachmentRef)) 62 - #set($videoAttachmentDoc = $xwiki.getDocument($services.model.resolveDocument($xcontext.macro.params.reference))) 63 - #end 64 - #if ($videoAttachmentDoc.getAttachment($videoAttachmentName)) 65 - #set($discard = $xwiki.jsx.use("Macros.Video20")) 66 - #set($discard = $xwiki.ssx.use("Macros.Video20")) 67 - #set($videoURL = $videoAttachmentDoc.getAttachmentURL($videoAttachmentName)) 68 - #set($videoPoster = "") 69 - #if("$!xcontext.macro.params.videoPoster" != '' && $videoAttachmentDoc.getAttachment($xcontext.macro.params.videoPoster)) 70 - #set($videoPoster = $videoAttachmentDoc.getAttachmentURL($xcontext.macro.params.videoPoster)) 71 - #end 72 - #set($supportedVideoFormats = ["mp4", "webm", "ogv", "mov", "avi", "mkv", "flv"]) 73 - #set($videoFormat = "") 74 - #set($videoMimeType = "") 75 - #set($formatIndex = $videoAttachmentName.lastIndexOf(".")) 76 - #if ($formatIndex != -1) 77 - #set($videoFormat = $videoAttachmentName.substring($mathtool.add($formatIndex, 1), $videoAttachmentName.length())) 78 - #if (!$supportedVideoFormats.contains($videoFormat)) 79 - #set($videoFormat = "") 80 - #else 81 - #set($videoMimeType = $videoFormat) 82 - #if ($videoFormat == "ogv") 83 - #set($videoFormat = "ogg") 84 - #set($videoMimeType = "ogg") 85 - #elseif ($videoFormat == "mov") 86 - #set($videoMimeType = "quicktime") 87 - #elseif ($videoFormat == "avi") 88 - #set($videoMimeType = "x-msvideo") 89 - #elseif ($videoFormat == "mkv") 90 - #set($videoMimeType = "x-matroska") 91 - #elseif ($videoFormat == "flv") 92 - #set($videoMimeType = "x-flv") 93 - #end 94 - #end 95 - #end 96 - #if ($videoFormat != "") 97 - {{html clean='false'}} 98 - <video class="video-js vjs-default-skin vjs-big-play-centered" 99 - controls preload="auto" 100 - width="${width}" 101 - height="${height}" 102 - poster="$!videoPoster" 103 - data-setup=''> 104 - <source src="$videoURL" type="video/${videoMimeType}" /> 105 - </video> 106 - {{/html}} 107 - #else 108 - {{warning}}Video format not supported.{{/warning}} 109 - #end 110 - #else 111 - {{warning}}Video attachment not found!{{/warning}} 112 - #end 113 - #elseif("$!xcontext.macro.params.dash" != '') 114 - #set($dashDocRef = $xcontext.macro.params.dash) 115 - #if($xwiki.exists($dashDocRef)) 116 - #set($dashDoc = $xwiki.getDocument($dashDocRef)) 117 - #set($manifestFile = $dashDoc.getAttachment("manifest.mpd")) 118 - #if($manifestFile) 119 - #set($manifestFileURL = $dashDoc.getAttachmentURL("manifest.mpd")) 120 - ## If the browser do not support DASH (Media Source Extensions) then display an flv low quality video 121 - #set($flvVideoURL = "") 122 - #if($dashDoc.getAttachment("video.flv")) 123 - #set($flvVideoURL = $dashDoc.getAttachmentURL("video.flv")) 124 - #end 125 - {{html clean='false'}} 126 - #set($discard = $xwiki.jsx.use("Macros.Video20")) 127 - #set($discard = $xwiki.ssx.use("Macros.Video20")) 128 - <video class="dashvideo video-js vjs-default-skin" controls preload="auto" width="$!{width}" height="$!{height}" > 129 - <source src="$manifestFileURL" type="application/dash+xml"> 130 - <input type="hidden" class="flv-video-url" value="$flvVideoURL"/> 131 - </video> 132 - {{/html}} 133 - #else 134 - {{warning}}manifest.mpd attachment not found!{{/warning}} 135 - #end 66 + #set ($discard = $xwiki.jsx.use('Macros.Video20')) 67 + #set ($discard = $xwiki.ssx.use('Macros.Video20')) 68 + #if ("$!xcontext.macro.params.attachment" != '') 69 + ## read a video attachement 70 + #set ($videoAttachmentName = $xcontext.macro.params.attachment) 71 + #set ($videoAttachmentDoc = $doc) 72 + #set ($videoAttachmentRef = $xcontext.macro.params.reference) 73 + #if ("$!videoAttachmentRef" != '' && $services.security.authorization.hasAccess('view', $videoAttachmentRef)) 74 + #set ($videoAttachmentDoc = $xwiki.getDocument($services.model.resolveDocument($videoAttachmentRef))) 75 + #end 76 + #if ($videoAttachmentDoc.getAttachment($videoAttachmentName)) 77 + #set ($videoURL = $videoAttachmentDoc.getAttachmentURL($videoAttachmentName)) 78 + #set ($videoPoster = '') 79 + #if ($videoAttachmentDoc.getAttachment($xcontext.macro.params.videoPoster)) 80 + #set ($videoPoster = $videoAttachmentDoc.getAttachmentURL($xcontext.macro.params.videoPoster)) 81 + #end 82 + #set ($supportedVideoFormats = ['mp4', 'webm', 'ogv', 'mov', 'avi', 'mkv', 'flv']) 83 + #set ($formatIndex = $videoAttachmentName.lastIndexOf('.')) 84 + #if ($formatIndex != -1) 85 + #set ($videoFormat = $videoAttachmentName.substring($mathtool.add($formatIndex, 1), $videoAttachmentName.length())) 86 + #if ($supportedVideoFormats.contains($videoFormat)) 87 + #set ($videoMimeType = $videoFormat) 88 + #if ($videoFormat == 'ogv') 89 + #set ($videoMimeType = 'ogg') 90 + #elseif ($videoFormat == 'mov') 91 + #set ($videoMimeType = 'quicktime') 92 + #elseif ($videoFormat == 'avi') 93 + #set ($videoMimeType = 'x-msvideo') 94 + #elseif ($videoFormat == 'mkv') 95 + #set ($videoMimeType = 'x-matroska') 96 + #elseif ($videoFormat == 'flv') 97 + #set ($videoMimeType = 'x-flv') 98 + #end 99 + #end 100 + #end 101 + #if ("$!videoFormat" != '') 102 + {{html clean="false"}} 103 + <div $!embedContainerClass> 104 + <video class="video-js vjs-default-skin vjs-big-play-centered $!embedItemClass" controls preload="auto" 105 + $!width $!height poster="$!videoPoster" data-setup=''> 106 + <source src="$!videoURL" type="video/$!videoMimeType" /> 107 + </video> 108 + </div> 109 + {{/html}} 136 136 #else 137 - TheDASH document notfound!{{/warning}}111 + {{warning}}Video format not supported.{{/warning}} 138 138 #end 139 - #else 140 - {{warning}}The Video URL you entered ($!{xcontext.macro.params.url}) does not match any of the video websites supported by this macro. Please check the address you entered or improve the macro to make it support this website.{{/warning}} 141 - #end 113 + #else 114 + {{warning}}Video attachment not found.{{/warning}} 115 + #end 116 + #elseif("$!xcontext.macro.params.dash" != '') 117 + #set ($dashDocRef = $services.model.resolveDocument($xcontext.macro.params.dash)) 118 + #if ($xwiki.exists($dashDocRef)) 119 + #set ($dashDoc = $xwiki.getDocument($dashDocRef)) 120 + #if ($dashDoc.getAttachment('manifest.mpd')) 121 + #set ($manifestFileURL = $dashDoc.getAttachmentURL('manifest.mpd')) 122 + ## If the browser do not support DASH (Media Source Extensions) then display an flv low quality video 123 + #set ($flvVideoURL = '') 124 + #if ($dashDoc.getAttachment('video.flv')) 125 + #set ($flvVideoURL = $dashDoc.getAttachmentURL('video.flv')) 126 + #end 127 + {{html clean="false"}} 128 + <div $!embedContainerClass> 129 + <video class="dashvideo video-js vjs-default-skin $!embedItemClass" controls preload="auto" $!width $!height> 130 + <source src="$!manifestFileURL" type="application/dash+xml"> 131 + <input type="hidden" class="flv-video-url" value="$!flvVideoURL"/> 132 + </video> 133 + </div> 134 + {{/html}} 135 + #else 136 + {{warning}}manifest.mpd attachment not found.{{/warning}} 137 + #end 138 + #else 139 + {{warning}}The DASH document not found.{{/warning}} 140 + #end 141 + #else 142 + {{warning}}The Video URL you entered ($!{xcontext.macro.params.url}) does not match any of the video websites supported by this macro. Please check the address you entered or improve the macro to make it support this website.{{/warning}} 143 + #end 142 142 #end 143 143 {{/velocity}}
- XWiki.WikiMacroParameterClass[5]
-
- Parameter description
-
... ... @@ -1,2 +1,1 @@ 1 1 The poster of the video is an image attachment that will be displayed before starting playing the video. 2 -
- XWiki.WikiMacroParameterClass[8]
-
- Parameter description
-
... ... @@ -1,0 +1,1 @@ 1 +The aspect ratio of a video describes the proportional relationship between its width and its height. Possible values: '1:1', '4:3', '16:9', '21:9'. - Parameter mandatory
-
... ... @@ -1,0 +1,1 @@ 1 +No - Parameter name
-
... ... @@ -1,0 +1,1 @@ 1 +ratio