Skip to Content

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
Change comment: Migrated property [type] from class [XWiki.WikiMacroParameterClass]
To version 5.1
edited by Ludovic Dubost
on 2018/12/09 12:30
Change comment: Install extension [org.xwiki.contrib:macro-video/1.13]

Summary

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 - 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);
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]
Macro code
... ... @@ -1,5 +1,4 @@
1 -{{velocity output=false}}
2 -
1 +{{velocity output="false"}}
3 3  Compute the URL of the embedded video from the original web URL.
4 4  
5 5  #set ($url = '')
... ... @@ -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 -
38 +#set ($embedContainerClass = '')
39 +#set ($embedItemClass = '')
40 +#set ($ratio = '')
41 +## The ratio value is used to compute a bootstrap css class: embed-responsive-16by9.
42 +#if ($xcontext.macro.params.ratio)
43 + #set ($ratio = $xcontext.macro.params.ratio.replace(':', 'by'))
44 + #set ($embedContainerClass = "class='embed-responsive embed-responsive-$ratio'")
45 + #set ($embedItemClass = 'embed-responsive-item')
46 + #set ($width = '100%')
47 + #set ($height = '100%')
48 +#end
49 +#set ($width = "width=$width")
50 +#set ($height = "height=$height")
43 43  {{/velocity}}
44 44  {{velocity}}
45 45  #if ("$!url" != '')
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>
54 + {{html clean="false"}}
55 + <div $!embedContainerClass>
56 + #if ($xcontext.macro.params.url.indexOf('google') != -1)
57 + <object class="$!embedItemClass" $!width $!height type="application/x-shockwave-flash" data="$!url">
58 + <param name="movie" value="$!url"></param>
59 + <param name="allowFullScreen" value="true"></param>
60 + </object>
61 + #else
62 + <iframe class="$!embedItemClass" src="$!url" $!width $!height frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
63 + #end
64 + </div>
65 + {{/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
67 + #set ($discard = $xwiki.jsx.use('Macros.Video20'))
68 + #set ($discard = $xwiki.ssx.use('Macros.Video20'))
69 + #if ("$!xcontext.macro.params.attachment" != '')
70 + ## read a video attachement
71 + #set ($videoAttachmentName = $xcontext.macro.params.attachment)
72 + #set ($videoAttachmentDoc = $doc)
73 + #set ($videoAttachmentRef = $xcontext.macro.params.reference)
74 + #if ("$!videoAttachmentRef" != '' && $services.security.authorization.hasAccess('view', $videoAttachmentRef))
75 + #set ($videoAttachmentDoc = $xwiki.getDocument($services.model.resolveDocument($videoAttachmentRef)))
76 + #end
77 + #if ($videoAttachmentDoc.getAttachment($videoAttachmentName))
78 + #set ($videoURL = $videoAttachmentDoc.getAttachmentURL($videoAttachmentName))
79 + #set ($videoPoster = '')
80 + #if ($videoAttachmentDoc.getAttachment($xcontext.macro.params.videoPoster))
81 + #set ($videoPoster = $videoAttachmentDoc.getAttachmentURL($xcontext.macro.params.videoPoster))
82 + #end
83 + #set ($supportedVideoFormats = ['mp4', 'webm', 'ogv', 'mov', 'avi', 'mkv', 'flv'])
84 + #set ($formatIndex = $videoAttachmentName.lastIndexOf('.'))
85 + #if ($formatIndex != -1)
86 + #set ($videoFormat = $videoAttachmentName.substring($mathtool.add($formatIndex, 1), $videoAttachmentName.length()))
87 + #if ($supportedVideoFormats.contains($videoFormat))
88 + #set ($videoMimeType = $videoFormat)
89 + #if ($videoFormat == 'ogv')
90 + #set ($videoMimeType = 'ogg')
91 + #elseif ($videoFormat == 'mov')
92 + #set ($videoMimeType = 'quicktime')
93 + #elseif ($videoFormat == 'avi')
94 + #set ($videoMimeType = 'x-msvideo')
95 + #elseif ($videoFormat == 'mkv')
96 + #set ($videoMimeType = 'x-matroska')
97 + #elseif ($videoFormat == 'flv')
98 + #set ($videoMimeType = 'x-flv')
99 + #end
100 + #end
101 + #end
102 + #if ("$!videoFormat" != '')
103 + {{html clean="false"}}
104 + <div $!embedContainerClass>
105 + <video class="video-js vjs-default-skin vjs-big-play-centered $!embedItemClass" controls preload="auto"
106 + $!width $!height poster="$!videoPoster" data-setup=''>
107 + <source src="$!videoURL" type="video/$!videoMimeType" />
108 + </video>
109 + </div>
110 + {{/html}}
136 136   #else
137 - {{warning}}The DASH document not found!{{/warning}}
112 + {{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
114 + #else
115 + {{warning}}Video attachment not found.{{/warning}}
116 + #end
117 + #elseif("$!xcontext.macro.params.dash" != '')
118 + #set ($dashDocRef = $services.model.resolveDocument($xcontext.macro.params.dash))
119 + #if ($xwiki.exists($dashDocRef))
120 + #set ($dashDoc = $xwiki.getDocument($dashDocRef))
121 + #if ($dashDoc.getAttachment('manifest.mpd'))
122 + #set ($manifestFileURL = $dashDoc.getAttachmentURL('manifest.mpd'))
123 + ## If the browser do not support DASH (Media Source Extensions) then display an flv low quality video
124 + #set ($flvVideoURL = '')
125 + #if ($dashDoc.getAttachment('video.flv'))
126 + #set ($flvVideoURL = $dashDoc.getAttachmentURL('video.flv'))
127 + #end
128 + {{html clean="false"}}
129 + <div $!embedContainerClass>
130 + <video class="dashvideo video-js vjs-default-skin $!embedItemClass" controls preload="auto" $!width $!height>
131 + <source src="$!manifestFileURL" type="application/dash+xml">
132 + <input type="hidden" class="flv-video-url" value="$!flvVideoURL"/>
133 + </video>
134 + </div>
135 + {{/html}}
136 + #else
137 + {{warning}}manifest.mpd attachment not found.{{/warning}}
138 + #end
139 + #else
140 + {{warning}}The DASH document not found.{{/warning}}
141 + #end
142 + #else
143 + {{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}}
144 + #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