问题描述
我们正在努力满足一项要求，即在一个页面上有多个Brightcove视频。
播放器控制栏中的视频需要有一个下载按钮。
我们尝试使用Brightcove Player Sample: Download Video Plugin
但是问题是下载按钮有时会在同一页面上出现一次。对于一个负载，它出现，而对于其他负载，它不出现。
任何人都可以帮助解决此问题。
我们的代码如下：
"use strict";
(function($,Drupal,drupalSettings) {
Drupal.behaviors.teste = {
attach: function attach(context) {
var registerPlugin = videojs.registerPlugin || videojs.plugin;
function download(data,strFileName,strMimeType) {
var self = window,defaultMime = "application/octet-stream",mimeType = strMimeType || defaultMime,payload = data,url = !strFileName && !strMimeType && payload,anchor = document.createElement("a"),toString = function toString(a) {
return String(a);
},myBlob = self.Blob || self.MozBlob || self.WebKitBlob || toString,fileName = strFileName || "download",blob,reader;
myBlob = myBlob.call ? myBlob.bind(self) : Blob;
if (String(this) === "true") {
payload = [payload,mimeType];
mimeType = payload[0];
payload = payload[1];
}
if (url && url.length < 2048) {
fileName = url.split("/").pop().split("?")[0];
anchor.href = url;
if (anchor.href.indexOf(url) !== -1) {
var ajax = new XMLHttpRequest();
ajax.open("GET",url,true);
ajax.responseType = "blob";
ajax.onload = function(e) {
download(e.target.response,fileName,defaultMime);
};
setTimeout(function() {
ajax.send();
},0);
return ajax;
}
}
if (/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)) {
if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
payload = dataUrlToBlob(payload);
mimeType = payload.type || defaultMime;
} else {
return navigator.msSaveBlob ? navigator.msSaveBlob(dataUrlToBlob(payload),fileName) : saver(payload);
}
}
blob = payload instanceof myBlob ? payload : new myBlob([payload],{
type: mimeType
});
function dataUrlToBlob(strUrl) {
var parts = strUrl.split(/[:;,]/),type = parts[1],decoder = parts[2] == "base64" ? atob : decodeURIComponent,binData = decoder(parts.pop()),mx = binData.length,i = 0,uiArr = new Uint8Array(mx);
for (i; i < mx; ++i) {
uiArr[i] = binData.charCodeAt(i);
}
return new myBlob([uiArr],{
type: type
});
}
function saver(url,winMode) {
if ("download" in anchor) {
anchor.href = url;
anchor.setAttribute("download",fileName);
anchor.className = "download-js-link";
anchor.innerHTML = "downloading...";
anchor.style.display = "none";
document.body.appendChild(anchor);
setTimeout(function() {
anchor.click();
document.body.removeChild(anchor);
if (winMode === true) {
setTimeout(function() {
self.URL.revokeObjectURL(anchor.href);
},250);
}
},66);
return true;
}
if (/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
url = url.replace(/^data:([\w\/\-\+]+)/,defaultMime);
if (!window.open(url)) {
if (confirm("displaying New Document\n\nUse Save As... to download,then click back to return to this page.")) {
location.href = url;
}
}
return true;
}
var f = document.createElement("iframe");
document.body.appendChild(f);
if (!winMode) {
url = "data:" + url.replace(/^data:([\w\/\-\+]+)/,defaultMime);
}
f.src = url;
setTimeout(function() {
document.body.removeChild(f);
},333);
}
if (navigator.msSaveBlob) {
return navigator.msSaveBlob(blob,fileName);
}
if (self.URL) {
saver(self.URL.createObjectURL(blob),true);
} else {
if (typeof blob === "string" || blob.constructor === toString) {
try {
return saver("data:" + mimeType + ";base64," + self.btoa(blob));
} catch (y) {
return saver("data:" + mimeType + "," + encodeURIComponent(blob));
}
}
reader = new FileReader();
reader.onload = function(e) {
saver(this.result);
};
reader.readAsDataURL(blob);
}
return true;
};
function removeSpaces(str) {
str = str.replace(/\s/g,'');
return str;
}
function changeDottoUnderline(str) {
str = str.replace(/\./g,'_');
return str;
}
registerPlugin("downloadButton",function() {
var myPlayer = this,videoName,totalRenditions,mp4ara = [],highestQuality,spacer,rendtionSara,newElement = document.createElement("div"),newImage = document.createElement("img");
myPlayer.on("loadstart",function() {
mp4ara = [];
videoName = myPlayer.mediainfo["name"];
videoName = removeSpaces(videoName);
videoName = changeDottoUnderline(videoName);
rendtionSara = myPlayer.mediainfo.sources;
totalRenditions = rendtionSara.length;
for (var i = 0; i < totalRenditions; i++) {
if (rendtionSara[i].container === "MP4" && rendtionSara[i].hasOwnProperty("src")) {
mp4ara.push(rendtionSara[i]);
}
}
mp4ara.sort(function(a,b) {
return b.size - a.size;
});
highestQuality = mp4ara[0].src;
newElement.id = "downloadImage";
newElement.className = "vjs-control downloadStyle";
newImage.setAttribute("src","https://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png");
newImage.style["cursor"] = "pointer";
newImage.onclick = function() {
var x = new XMLHttpRequest();
x.open("GET",true);
x.responseType = 'blob';
x.onload = function(e) {
download(x.response,"video/mp4");
};
x.send();
};
newElement.appendChild(newImage);
spacer = myPlayer.controlBar.customControlSpacer.el();
spacer.setAttribute("style","justify-content: flex-end;");
spacer.appendChild(newElement);
});
});
var i = 0;
$.each($('.video-js'),function() {
var video = $(this);
if (video.length > 0 && drupalSettings.downloadOption == 'yes') {
$(this).attr('id',$(this).attr('id') + i);
var videoId = video.attr('id');
videojs.getPlayer('#' + videoId).ready(function() {
var player = this;
player.downloadButton();
});
}
i++;
});
}
};
})(jQuery,drupalSettings);
我们正在尝试将其集成到Drupal CMS。
我们还在页面加载上看到警告
VIDEOJS: WARN: A plugin named "reloadSourceOnError" already exists. You may want to avoid re-registering plugins!
VIDEOJS: Ignoring already initialized player
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）