/**
* 此文件的头部注释
*/
/*global jQuery: false */
Modernizr.addTest('seamless', 'seamless' in document.createElement('iframe'));
// Test for `sandbox` attribute in iframes.
//
// Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox
Modernizr.addTest('sandbox', 'sandbox' in document.createElement('iframe'));
Modernizr.addTest('srcdoc', 'srcdoc' in document.createElement('iframe'));
(function ($) {
'use strict';
function bulidFrameContent($iframe, frameContent) {
var editorHead = '',
editorBody = '
',
content,
$uuid = pe.tools.uuid(16, 4),
contentDocument,
$head = $(editorHead),
$body = $(editorBody);
$head.html('');
content = $body.html(frameContent).attr('id', $uuid);
contentDocument = $iframe.get(0).contentDocument || $iframe.get(0).contentWindow.document;
contentDocument.write('' +
$head.get(0).outerHTML +
content.get(0).outerHTML +
'');
}
$('[data-display="frame"]')
.each(function (value) {
var $this = $(this),
$frame = $this.prev();
if (!Modernizr.srcdoc && $this.attr('type') === 'text/plain') {
bulidFrameContent($frame, $this.html());
}
setTimeout(function () {
var scrollHeight = $frame.contents().find('html').get(0).scrollHeight;
$frame.height(scrollHeight);
if (scrollHeight > 200) {
$frame.height(scrollHeight);
//$('').text('显示全部').on('click', function (e) {
// var $link = $(this);
// $frame.height(scrollHeight + 30);
// $link.remove();
//}).insertAfter($frame);
$frame.contents().find('img').css('max-width', '100%');
}
$frame[0].contentWindow.location.reload(true);
},
200);
});
// 查看页上传控件图片&视频&音频预览
$(".multiuploadimages-list")
.each(function () {
var that = $(this),
$piclis = that.find("li:has(.pic)"),
$videolis = that.find("li:has(.video)"),
$audiolis = that.find("li:has(.audio)"),
$videoModal = $(''),
$photoModal = $(''),
$audioModal = $('');
that.append($videoModal).append($photoModal).append($audioModal);
// 图片预览
$piclis.each(function () {
var $li = $(this),
src = $li.find('.pic img').attr('src'),
$photoOverlay = $(''),
img = document.createElement("img");
img.src = src;
img.onload = function (evt) {
$photoOverlay.click(function (event) {
event.preventDefault();
$photoModal.find("#photo-element").attr("src", src);
$photoModal.modal('show');
});
$li.append($photoOverlay);
}
})
// 视频预览
var $video = $videoModal.find("#video-element");
$videoModal.on('hidden.bs.modal', function () { $video[0].pause(); });
$videolis.each(function () {
var $li = $(this),
$img = $li.find('img'),
src = $li.find('a').attr('href'),
$videoOverlay = $(''),
video = document.createElement("video");
video.src = src;
video.onloadedmetadata = function (evt) {
$videoOverlay.click(function (event) {
event.preventDefault();
$videoModal.find("source").attr("src", src);
var video = $video[0];
video.onloadedmetadata = function (evt) {
var v_width = video.videoWidth,
v_height = video.videoHeight,
w_width = ($(window).width() * 0.8) - 49,
w_height = $(window).height() - 154;
var v_proportion = v_width / v_height;
var w_proportion = w_width / w_height;
// if(v_proportion > w_proportion){
// $("#modalVideo .modal-dialog").width("80%");
// $("#interviewerVideo").width("100%");
// }else{
// $("#modalVideo .modal-dialog").width(w_height * v_proportion + 32 - 8);
// $("#interviewerVideo").width(w_height * v_proportion - 8);
// }
// 视频强制显示16*9 或9*16
if (v_width > v_height) {
// 横屏
if (w_width / 16 < w_height / 9) {
$videoModal.find(".modal-dialog").width(w_width + 32);
$video.width(w_width);
$video.height(w_width / 16 * 9);
} else {
$videoModal.find(".modal-dialog").width((w_height / 9 * 16) + 32);
$video.width(w_height / 9 * 16);
$video.height(w_height);
}
} else {
// 竖屏
$videoModal.find(".modal-dialog").width((w_height / 16 * 9) + 32);
$video.width(w_height / 16 * 9);
$video.height(w_height);
}
};
// 播放视频。
video.load();
$videoModal.modal('show');
video.play();
});
$li.append($videoOverlay);
}
var imgWidth = 240, imgHeight = 160; // 定义生成图片的宽高，其他宽高需求可以自己改
var videoElement = document.createElement("VIDEO");
videoElement.src = src;
videoElement.muted = true;
videoElement.autoplay = true; // 视频一定要设置自动播放，否则抓出来的封面不是白的就是透明的
videoElement.setAttribute("crossOrigin", 'anonymous');
videoElement.setAttribute('playsinline', '');
videoElement.setAttribute('webkit-playsinline', ''); //这个属性是内联播放，避免在ios中，ios会劫持播放器，自动弹出播放界面
videoElement.addEventListener("loadeddata", () => {
try {
var { videoWidth, videoHeight } = videoElement; // 获取video的宽高
var x = 0, y = 0, width = 0, height = 0;
// 计算缩小后图片的宽高以及canvas绘制的位置信息
if (videoWidth / videoHeight >= 1.5) {
width = imgWidth;
height = videoHeight * (imgWidth / videoWidth);
x = 0;
y = (imgHeight - height) / 2;
} else {
height = imgHeight;
width = videoWidth * (imgHeight / videoHeight);
y = 0;
x = (imgWidth - width) / 2;
}
var canvas = document.createElement("canvas");
canvas.width = imgWidth;
canvas.height = imgHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, imgWidth, imgHeight);
ctx.drawImage(videoElement, x, y, width, height);
var src = canvas.toDataURL("image/jpeg"); // 完成base64图片的创建
$img.attr('src', src);
// 清空video对象
//videoElements.splice($.inArray(videoElement, videoElements), 1);
videoElement = null;
} catch (e) {
$img.attr('src', '/content/_common/base/img/files/file-video.png');
}
})
videoElement.addEventListener("error", () => {
$img.attr('src', '/content/_common/base/img/files/file-video.png');
});
})
// 音频预览
var $audio = $audioModal.find("#audio-iframe");
$audioModal.on('hidden.bs.modal', function () {
var audio = $audio.contents().find("audio");
if (audio.length > 0) {
audio[0].pause();
}
});
$audiolis.each(function () {
var $li = $(this),
src = $li.find('a').attr('href'),
$audioOverlay = $(''),
audio = document.createElement("audio");
audio.src = src;
audio.onloadedmetadata = function (evt) {
$audioOverlay.click(function (event) {
event.preventDefault();
$audio.contents().find("body").html("");
$audio.contents().find("body").append($(''));
$audioModal.modal('show');
});
$li.append($audioOverlay);
}
})
})
}(jQuery));