html
<div class="play_btn" th:data-id="${video.Url}" th:data-size="${video.Size}" onclick="playVideo(this.getAttribute('data-id'),this.getAttribute('data-size'))"></div>
js
跨域
function playVideo(content,size) {
var video = document.createElement('video');
video.onload = function() {
layerOpenMsg("<p style=\"text-align: center;font-size: 25px;margin-top: 120px;\"><b>视频存在</b></p>");
}
video.onerror = function() {
var msg;
if(size > 52428800){
msg = "<p style=\"text-align: center;font-size: 25px;margin-top: 120px;\"><b>视频超过50M,未下载</b></p>";
}else {
msg = "<p style=\"text-align: center;font-size: 25px;margin-top: 120px;\"><b>视频正在下载,请稍后再播</b></p>";
}
layerOpenMsg(msg);
}
video.src = content;
//不同浏览器情况不同,这里判断在该浏览器是否可以播放
video.oncanplaythrough = function() {
layer.open({
type: 2,//iframe层
title: false,//不显示标题
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: content
});
};
}
不跨域
var http = new XMLHttpRequest();
http.open('HEAD', '/folder/video.mp4');
http.onreadystatechange = function() {
if (this.readyState == this.DONE) {
if (this.status != 404) {
// resource exists
}
}
};
http.send();