/** * @param scriptId */ function (scriptId, height) { var originContainer = document.getElementById(scriptId); var head = document.getElementsByTagName('head')[0]; var documentFragment = document.createDocumentFragment(); var body = document.getElementsByTagName('body')[0]; var options = { videoId: '', baseUrl: 'https://media.ykt.ru', fileUrl: 'fileurl', scripts: [], styles: [], mediaVideoInfoUrl: '//media.ykt.ru/get_video_info.shtml', most: { url: '', volume: 0.2, skip: 5 //sec }, video: { width: '100%' , height: height ? height : '400px' , controls: 'false' , preload: 'none' , oncontextmenu: 'return false;' , sources: [{src:'/file/360p.mp4', type: 'video/mp4'}] , posterUrl: '' , defaultRes: '360p' , volume: 1.0 }, errors: { ENCODING_IN_PROGRESS: 1, SERVER_NOT_RESPOND: 2, FILE_NOT_FOUND: 3, SERVER_ERROR: 4, msg: { 1: "

Извините, видео находится в стадии кодирования.
Это займет немного времени. Попробуйте позже." //в стадии кодирования , 2: "

Ошибка! Сервер не отвечает." , 3: "

Запрашиваемый файл не найден." , 4: "

Ошибка сервера! Попробуйте позже или свяжитесь с тех. поддержкой" } } }; var YktVideoJS = function () { this.init(); originContainer.setAttribute('data-init', 'true'); }; YktVideoJS.prototype = { init: function () { this.genHTML(); originContainer.parentNode.insertBefore(documentFragment, originContainer); this.initStatic(); }, genHTML: function () { var video = document.createElement('video'); var source = null; video.className = 'video-js vjs-default-skin vjs-big-play-centered'; video.id = 'media-video-' + scriptId; video.setAttribute('controls', options.video.controls); video.setAttribute('preload', options.video.preload); video.setAttribute('oncontextmenu', options.video.oncontextmenu); video.setAttribute('width', options.video.width); video.setAttribute('height', options.video.height); video.setAttribute('poster', '/preview/preview.jpg'); video.setAttribute('onclick', 'this.paused ? this.play() : this.pause(); return false;'); for (var i = 0, len = options.video.sources.length; i < len; i++) { source = document.createElement('source'); source.setAttribute('src', options.video.sources[i].src); source.setAttribute('type', options.video.sources[i].type); if (typeof options.video.sources[i].res != 'undefined') { source.setAttribute('data-res', options.video.sources[i].res); } video.appendChild(source); } documentFragment.appendChild(video); }, initStatic: function () { var i, len; for (i = 0, len = options.styles.length; i < len; i++) { this.initStyle(options.styles[i]); } for (i = 0, len = options.scripts.length; i < len; i++) { this.initScript(options.scripts[i]); } }, initStyle: function (url) { var link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.setAttribute('href', options.baseUrl + url); originContainer.parentNode.insertBefore(link, originContainer); }, initScript: function (url) { var self = this; var script = document.createElement('script'); script.setAttribute('charset', 'UTF-8'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', options.baseUrl + url); originContainer.parentNode.insertBefore(script, originContainer); if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == 'loaded' || script.readyState == 'complete') { self.initPlayer(); } }; } else { script.onload = function () { self.initPlayer(); }; } }, getVideoInfo: function (callback) { var self = this; var scriptSuccess = false; var js = document.createElement('script'); var callbackName = 'callback_' + scriptId; js.type = 'text/javascript'; js.async = true; window[callbackName] = function (json) { var sourcesMp4 = []; var sourcesWebm = []; var thumbnails = {}; scriptSuccess = true; if (!self.hasError(json.file, json.preview)) { var i, len, item, mime; for (i = 0, len = json.file.length; i < len; i++) { item = json.file[i]; mime = (item.name != 'undefined' && typeof item.name == 'string') ? item.name.split('.') : []; if (mime.length == 2) { switch (mime[1]) { case 'mp4': sourcesMp4.push({ 'type': 'video/' + mime[1], 'src': options.fileUrl + '/' + item.type + '/' + item.name, 'data-res': mime[0] }); break; case 'webm': sourcesWebm.push({ 'type': 'video/' + mime[1], 'src': options.fileUrl + '/' + item.type + '/' + item.name, 'data-res': mime[0] }); break; } } } for (i = 0, len = json.preview.length; i < len; i++) { item = json.preview[i]; mime = (item.name != 'undefined' && typeof item.name == 'string') ? item.name.split('.') : []; if (mime.length == 2) { if (mime[0] === 'error') { self.vjs.poster(options.fileUrl + '/preview/' + item.name); break; } else { if (mime[0] === 'preview') { self.vjs.poster(options.fileUrl + '/preview/' + item.name); } thumbnails[mime[0]] = { 'src': options.fileUrl + '/preview/' + item.name, 'width': '100px' }; } } } if (sourcesMp4.length > 0) { callback.call(this, sourcesMp4, thumbnails); } else { callback.call(this, sourcesWebm, thumbnails); } } }; function checkCallback() { if (scriptSuccess) return; delete window[callbackName]; self.showError(options.errors.SERVER_ERROR); } if (js.readyState) { js.onreadystatechange = function () { if (js.readyState == 'loaded' || js.readyState == 'complete' || js.readyState == 'error') { checkCallback(); } }; } else { js.onload = js.onerror = function () { checkCallback(); }; } js.src = options.mediaVideoInfoUrl + '&callback=' + callbackName; originContainer.parentNode.insertBefore(js, originContainer); }, hasError: function (sources, thumbnails) { if (sources.length == 0 && thumbnails.length == 0) { this.showError(options.errors.FILE_NOT_FOUND); return true; } if (sources.length == 0 && thumbnails.length > 0) { this.showError(options.errors.ENCODING_IN_PROGRESS); return true; } }, showError: function (code) { if (typeof options.errors.msg[code] != 'undefined') { this.vjs.error(options.errors.msg[code]); } }, saveRes: function (res) { Cookies.set('vjsRes', res); }, getDefaultRes: function () { return typeof Cookies != 'undefined' && Cookies.get('vjsRes') ? Cookies.get('vjsRes') : options.video.defaultRes; }, initPlayer: function () { var self = this; self.vjs = videojs('media-video-' + scriptId, { withCredentials: true, flash: { swf: options.baseUrl + '/media/video-js/video-js.swf' }, techOrder: ['html5'] }).ready(function () { this.el().style.margin = '0 auto'; this.volume(options.volume); if (options.video.sources.length == 0) { self.getVideoInfo(function (sources, thumbnails) { //console.log(sources); self.vjs.src(sources); self.vjs.resolutionSelector({ default_res: self.getDefaultRes(), sources: sources }); if (typeof options.video.thumbnails != 'undefined') { self.vjs.thumbnails(options.video.thumbnails); } else { self.vjs.thumbnails(thumbnails); } }); } this.one('firstplay', function (event) { //self.xhr(options.baseUrl + '/report/play/' + options.videoId + '?ts=' + new Date().getTime()); /*if (typeof options.most.url != 'undefined' && options.most.url !== '') { this.ads(); this.vast({ skip: options.most.skip, url: options.most.url, volume: options.most.volume, originVolume: options.video.volume }); }*/ }); this.on('error', function () { //self.xhr(options.baseUrl + '/report/error/' + options.videoId + '?ts=' + new Date().getTime()); }); this.on('contextmenu', function () { return false; }); this.on('changeRes', function () { self.saveRes(self.vjs.getCurrentRes()); }); // Нужно узнать за какое время заполняется буфер var tb = null; this.on('play', function () { tb = new Date().getTime(); }); this.one('playing', function () { tb = new Date().getTime() - tb; //self.xhr(options.baseUrl + '/report/buffer/' + options.videoId + '?tb=' + tb); }); }); }, xhr: function (url) { var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest; var xhr = new XHR(); xhr.open('GET', url, true); xhr.send(); } }; if (originContainer && !originContainer.hasAttribute('data-init')) { return new YktVideoJS(); } else { return null; } }