Skip to Content

Changes for page Video Macro

Last modified by Ludovic Dubost on 2023/04/25 09:12
From version 5.1
edited by Ludovic Dubost
on 2018/12/09 12:30
Change comment: Install extension [org.xwiki.contrib:macro-video/1.13]
To version 4.1
edited by Ludovic Dubost
on 2018/11/30 15:24
Change comment: Migrated property [async_enabled] from class [XWiki.WikiMacroClass]

Summary

Details

Page properties
Content
... ... @@ -1,47 +1,42 @@
1 -==Example usage==
1 +Example usage:
2 2  
3 +{{code}}
3 3  Youtube:
4 4  
5 -{{code}}
6 6  {{video url="http://www.youtube.com/watch?v=Titn-yAh74A"/}}
7 -{{/code}}
8 8  
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 -
17 17  Dailymotion:
18 18  
19 -{{code}}
20 20  {{video url="http://www.dailymotion.com/video/x9x04h_wiki-et-reseau-social-xwiki-et-blue_tech"/}}
21 -{{/code}}
22 22  
23 -{{video url="http://www.dailymotion.com/video/x9x04h_wiki-et-reseau-social-xwiki-et-blue_tech"/}}
24 -
25 25  Vimeo:
26 26  
27 -{{code}}
28 28  {{video url="http://vimeo.com/30980990"/}}
29 -{{/code}}
30 30  
31 -{{video url="http://vimeo.com/30980990"/}}
32 -
33 33  Attachment:
34 34  
35 -{{code}}
36 36  {{video attachment="test-vid.webm"/}}
37 -{{/code}}
38 38  
39 -{{video attachment="test-vid.webm"/}}
40 -
41 41  DASH:
42 42  
43 -{{code}}
44 44  {{video dash="Space.Page"/}}
45 45  {{/code}}
46 46  
47 -{{video dash="Space.Page"/}}
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 +
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,48 +1,50 @@
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 - } 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 - }
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 + }
33 33  }
34 34  
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);
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 + });
45 45   });
46 - });
47 - });
49 + });
48 48  });
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,4 +1,5 @@
1 -{{velocity output="false"}}
1 +{{velocity output=false}}
2 +
2 2  Compute the URL of the embedded video from the original web URL.
3 3  
4 4  #set ($url = '')
... ... @@ -33,114 +33,110 @@
33 33   ## http://vimeo.com/moogaloop.swf?clip_id=<videoId>&show_title=1
34 34   #set ($url = $xcontext.macro.params.url.replaceAll('^.*?//.*?/(.*?)([#?].*|$)', '//player.vimeo.com/video/$1'))
35 35  #end
37 +
38 +Compute the width and height.
39 +
36 36  #set ($width = $xcontext.macro.params.width)
37 37  #set ($height = $xcontext.macro.params.height)
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")
42 +
51 51  {{/velocity}}
52 52  {{velocity}}
53 53  #if ("$!url" != '')
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}}
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>
66 66  #else
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}}
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
111 111   #else
112 - {{warning}}Video format not supported.{{/warning}}
137 + {{warning}}The DASH document not found!{{/warning}}
113 113   #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
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
145 145  #end
146 146  {{/velocity}}
XWiki.WikiMacroParameterClass[5]
Parameter description
... ... @@ -1,1 +1,2 @@
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,1 +1,0 @@
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,1 +1,0 @@
1 -No
Parameter name
... ... @@ -1,1 +1,0 @@
1 -ratio