Skip to Content

Changes for page Video Macro

Last modified by Ludovic Dubost on 2023/04/25 09:12
From version 6.1
edited by Ludovic Dubost
on 2019/05/20 19:05
Change comment: Install extension [org.xwiki.contrib:macro-video/1.14]
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]
Asynchronous rendering
... ... @@ -1,1 +1,0 @@
1 -No
Macro code
... ... @@ -1,5 +1,7 @@
1 -{{velocity}}
2 -## Compute the URL of the embedded video from the original web URL.
1 +{{velocity output=false}}
2 +
3 +Compute the URL of the embedded video from the original web URL.
4 +
3 3  #set ($url = '')
4 4  #if ($xcontext.macro.params.url.indexOf('dailymotion') != -1)
5 5   ## DailyMotion URLs have the following format:
... ... @@ -32,114 +32,110 @@
32 32   ## http://vimeo.com/moogaloop.swf?clip_id=<videoId>&show_title=1
33 33   #set ($url = $xcontext.macro.params.url.replaceAll('^.*?//.*?/(.*?)([#?].*|$)', '//player.vimeo.com/video/$1'))
34 34  #end
37 +
38 +Compute the width and height.
39 +
35 35  #set ($width = $xcontext.macro.params.width)
36 36  #set ($height = $xcontext.macro.params.height)
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")
42 +
50 50  {{/velocity}}
44 +{{velocity}}
45 +#if ("$!url" != '')
51 51  
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}}
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>
65 65  #else
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}}
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
110 110   #else
111 - {{warning}}Video format not supported.{{/warning}}
137 + {{warning}}The DASH document not found!{{/warning}}
112 112   #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
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
144 144  #end
145 145  {{/velocity}}
Cached
... ... @@ -1,1 +1,0 @@
1 -No
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