https://fgurgia.ru/nonstatic/scripts/video.js

1$(document).ready(function () {
2    var body = $('body');
3    body.on('click', '.file-view-attribute-container-title', function (event) {
4        event.preventDefault();
5        fileClick($(this).parent().find('.file-view-attribute'));
6    }).on('click', '.file-view-attribute', function (event) {
7        event.preventDefault();
8        fileClick($(this));
9    }).on('click', '.file-group-text', function (event) {
10        clickFileGroutText($(this));
11    })
12});
13
14function clickFileGroutText(btn) {
15    var group = btn.parents('.group-container').first(),
16        serial = btn.attr('data-serial');
17    group.find('.file-group-text').removeClass('active');
18    group.find('.file-group-multimedia').removeClass('active');
19    group.find('.file-group-multimedia-data').removeClass('active');
20
21    btn.addClass('active');
22    group.find('.file-group-multimedia-' + serial).addClass('active');
23    group.find('.file-group-multimedia-data-' + serial).addClass('active');
24}
25
26function fileClick(btn) {
27    var url = btn.attr('data-url');
28    if (url.indexOf(getBaseURL()) === -1) {
29        url = getBaseURL() + url;
30    }
31    if (url.indexOf('mp3') !== -1) {
32        audioClick(url);
33    } else {
34        videoClick(url);
35    }
36}
37
38function audioClick(url) {
39    var audio = new Audio(url);
40    audio.setControlButtons(audio);
41    audio.reload();
42    audio.play();
43}
44
45function videoClick(url) {
46    var video = new Video(url);
47    video.setControlButtons(video);
48    video.reload();
49    video.play();
50}
51
52function buildVideoTag(url) {
53    var aTag = $('<a></a>');
54    aTag.attr('href', url);
55    var preview = $('<img />');

56    var src = url.substring(0, url.lastIndexOf('.')) + 'p' + url.substring(url.lastIndexOf('.'));
57    preview.attr({src:(src.replace("video", "image")), alt:'Видео'});
58    aTag.append(preview);
59    aTag.attr('data-url', url);
60    aTag.addClass('file-view-attribute');
61    return aTag;
62}
63
64function buildAudioTag(url) {
65    var aTag = $('<audio controls></audio>');
66    var source_audio = $('<source />');
67    source_audio.attr({src:(url), type:"audio/mp3"});
68    source_audio.append("Your browser does not support the\n" +
69        "    <code>audio</code> element.");
70    aTag.append(source_audio);
71    return aTag;
72}
73
74function Video(baseURL) {
75    var url = baseURL;
76    var ratio;
77    var paused;
78    this.defaultQuality = 0;
79    var qualities = [
80        {width:320,height:240,suffix:'s'},
81        {width:480,height:360,suffix:'i'},
82        {width:720,height:540,suffix:'m'}
83    ];
84    var video = document.getElementById('video');
85    var source = $("#play_video");
86
87    this.play = function (number) {
88        if (number === undefined) number = this.defaultQuality;
89        $("#top_frame").css('display', 'block');
90        paused = video.paused;
91        var curr = this.pause();
92        var urlStart = url.substring(0, url.lastIndexOf('.'));
93        if (urlStart.endsWith('m')) {
94            urlStart = urlStart.substr(0, urlStart.length - 1);
95        }
96        var src = urlStart + qualities[number].suffix + url.substring(url.lastIndexOf('.'));
97
98        source.attr('src', src);
99        video.load();
100        setTimeout(function () {
101            video.currentTime = curr;
102            if (!paused) {
103                video.play();
104            }
105            setVideoHeight(number);
106        }, 500);
107    };
108
109    this.pause = function() {
110        video.pause();
111        var currentTime = video.currentTime;
112        if (currentTime !== 0) {
113            return currentTime;
114        } else {
115            return 0;
116        }
117    };
118
119    this.getQualities = function() {
120        return qualities;
121    };
122
123    this.stop = function() {
124        $("#top_frame").css('display', 'none');
125        video.pause();
126    };
127
128    this.reload = function () {
129        video.currentTime = 0;
130    };
131
132    var setVideoHeight = function (number) {
133        if (ratio === undefined) {
134            ratio = video.clientWidth / video.clientHeight;
135        }
136
137        var width = ratio * qualities[number].height;
138        video.style.width = width + 'px';
139        video.style.height = qualities[number].height + 'px';
140        $('#video_width').width(width);
141    };
142
143    this.setControlButtons = function setControlButtons(video) {
144        var qualities = video.getQualities();
145        var controls = $("#controls").empty();
146        for(var i = 0; i < qualities.length; i++) {
147            var btn = $('<button class="btn btn-xs btn-default quality"></button>');
148            btn.text(qualities[i].width);
149            btn.val(i);
150            if (i === video.defaultQuality) btn.addClass('active');
151            btn.click(function() {
152                var value = parseInt($(this).val());
153                video.play(value);
154                $('.quality').each(function() {
155                    $(this).removeClass('active');
156                });
157                $(this).addClass('active');
158            });
159            controls.append(btn);
160        }
161        $('#close_video').click(function () {
162            video.stop();
163        });
164    }
165}
166
167
168
169function Audio(baseURL) {
170    var url = baseURL;
171    var paused;
172    this.defaultQuality = 0;
173    var audio = document.getElementById('audio');
174    var source = $("#play_audio");
175
176    this.play = function () {
177        $("#top_frame_audio").css('display', 'block');
178        paused = audio.paused;
179        var curr = this.pause();
180
181        source.attr('src', url);
182        audio.load();
183        setTimeout(function () {
184            audio.currentTime = curr;
185            if (!paused) {
186                audio.play();
187            }
188        }, 500);
189    };
190
191    this.pause = function() {
192        audio.pause();
193        var currentTime = audio.currentTime;
194        if (currentTime !== 0) {
195            return currentTime;
196        } else {
197            return 0;
198        }
199    };
200
201    this.stop = function() {
202        $("#top_frame_audio").css('display', 'none');
203        audio.pause();
204    };
205
206    this.reload = function () {
207        audio.currentTime = 0;
208    };
209
210    this.setControlButtons = function setControlButtons(audio) {
211        $('#close_audio').click(function () {
212            audio.stop();
213        });
214    }
215}