/**
* 此文件的头部注释
*/
/*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)"),
$videomodal = $(''),
$photomodal = $('');
that.append($videomodal).append($photomodal);
// 图片预览
$piclis.each(function () {
var $li = $(this),
src = $li.find('.pic img').attr('src'),
$photooverlay = $('');
$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 = $('');
$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/png"); // 完成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');
});
})
})
}(jquery));