js判断视频是否可以成功播放 layui打开视频页面 thymeleaf显示视频列表

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();