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

最新推荐文章于 2024-05-13 10:51:55 发布

原创最新推荐文章于 2024-05-13 10:51:55 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html5

2021年1月专栏收录该内容

5 篇文章

订阅专栏

本文探讨了JavaScript中如何处理视频跨域加载问题，通过playVideo函数实现视频预加载及错误提示，并对比了使用XMLHttpRequest进行不跨域请求的方法。

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