https://scti.com.au/mc-4ae19cb4-2340-482b-9937-16c9-cdn-endpoint.a…&hash=3EE4B657D1E3FAB9B53E366D1B878C25

1/* global MediaElementPlayer:false */
2/**
3 * Component Video
4 * @module Video
5 * @param  {jQuery} $ Instance of jQuery
6 * @return {Object} List of Video component methods
7 */
8XA.component.video = (function($, document) {
9    /**
10     * In this object stored all public api methods
11     * @type {Object.<Methods>}
12     * @memberOf module:Video
13     * */
14    var api = {};
15    /**
16     * Set class name to video element depend 
17     * in video width size. </br>
18        <p>"video-small" - if videoWidth < 481 && videoWidth >= 321</p>
19        <p>"hide-controls" - if videoWidth < 321</p>
20     * @memberOf module:Video
21     * @method
22     * @param {jQuery.<Element>} video Video element
23     */
24    function checkSize(video) {
25        var videoWidth = video.width();
26        video.removeClass("video-small hide-controls");
27
28        if (videoWidth < 481 && videoWidth >= 321) {
29            video.addClass("video-small");
30        } else if (videoWidth < 321) {
31            video.addClass("hide-controls");
32        }
33    }
34
35    /**
36     * Initialize video component and create instance of 
37     * [MediaElementPlayer]{@link https://www.mediaelementjs.com/} that 
38     * handle all work with video player.
39     * @memberOf module:Video
40     * @method
41     * @param {jQuery.<Element>} video Video element
42     * @param {Object} properties Video element properties
43     * @return undefined;
44     * 
45     */
46    function initVideo(video, properties) {
47        var content = video.find("video");
48
49        if (!content.length) {
50            return;
51        }
52       
53        var callback = function(mediaElement) {
54            mediaElement.movieName = "Movie";
55
56            $(mediaElement).on("ended", function() {
57                if (properties.fromPlaylist) {
58                    $(properties.playlist).trigger("change-video");
59                }
60            });
61            $(mediaElement)
62                .closest(".component-content")
63                .find(".video-init")
64                .hide();
65        };
66
67        $.extend(properties, {
68            plugins: ["youtube", "flash", "silverlight"],
69            silverlightName: "silverlightmediaelement.xap",
70            classPrefix: "mejs-",
71            success: callback,
72            stretching: "auto",
73            pluginPath: "../other/"
74        });
75
76        content.each(function(key) {
77            var $elem = $(content[key]),
78                _this = this;
79            if ($elem.attr("poster")) {
80                var initBtn = $elem.parent().find(".video-init");
81                $elem.add(initBtn).on("click", function() {
82                    properties.success = (function(arg) {
83                        return function() {
84                            try {
85                                arguments[0].load();
86                                arguments[0].play();
87                            } catch (e) {
88                                /* eslint-disable */
89                                console.warn("Error while loading video");
90                                /* eslint-enable  */
91                            }
92
93                            return arg.apply(this, arguments);
94                        };
95                    })(properties.success);
96                    initBtn.hide();
97                    new MediaElementPlayer(_this, properties);
98                });
99            } else {
100                new MediaElementPlayer(content[key], properties);
101            }
102        });
103        return;
104    }
105    /**
106     * This methods called by 
107     * [Playlist.replaceSource]{@link module:Playlist.Playlist.replaceSource}
108     * and extend properties of video component.
109     * @memberOf module:Video
110     * @method
111     * @param {jQuery} video Root DOM element of video component wrapped by jQuery
112     * @param {Object} playlist setted by playlist component
113     * @alias module:Video.initVideoFromPlaylist
114     */
115    api.initVideoFromPlaylist = function(video, playlist) {
116        var properties = $(video).data("properties");
117
118        $.extend(properties, {
119            fromPlaylist: true,
120            playlist: playlist
121        });
122
123        return initVideo(video, properties);
124    };
125    /**
126     * For each video component run
127     * [initVideo]{@link module:Video.initVideo}

127, [checkSize]{@link module:Video.checkSize}
128     * methods and add [checkSize]{@link module:Video.checkSize} as a callback for
129     * eventListener to <b>window.resize</b>
130     * @memberOf module:Video
131     * @method
132     * @param {jQuery} component Root DOM element of video component wrapped by jQuery
133     * @param {Object} prop Properties setted in data attribute
134     *  of video component
135     * @alias module:Video.initInstance
136     */
137    api.initInstance = function(component, prop) {
138        var $component = $(component);
139        initVideo($component, prop);
140        checkSize($component);
141
142        $(window).resize(function() {
143            checkSize($component);
144        });
145    };
146    /**
147     * Find all not initialized yet Video components and in a loop for each of them
148     * run ["initInstance"]{@link module:Video.initInstance} method.
149     * In case if component has property "playlist installed" it call
150     * [XA.component.playlist.init]{@link module:Playlist.init}
151     * @memberOf module:Video
152     * @alias module:Video.init
153     */
154    api.init = function() {
155        if (XA.component.hasOwnProperty("playlist")) {
156            XA.component.playlist.init();
157        }
158
159        var video = $(".video.component:not(.initialized)");
160
161        video.each(function() {
162            var properties = $(this).data("properties");
163
164            api.initInstance(this, properties);
165
166            $(this).addClass("initialized");
167        });
168
169        $(document).on("mozfullscreenchange", function() {
170            setTimeout(function() {
171                $(window).resize();
172            }, 200); //mozilla bug fix
173        });
174    };
175
176    return api;
177})(jQuery, document);
178
179XA.register("video", XA.component.video);