Question

我正在使用以下代码将背景图片缩略图设置为嵌入式YouTube视频的占位符。如果视频被删除，缩略图将成为youtube的默认404缩略图。我想设置自己的404缩略图，但我不确定如何。我可以找到检查img错误但不检查背景图像错误的方法。（另外，我不能查找没有背景图像的div，因为它们都有一个，它可能只是一个断开的链接。）

任何人都知道如何查看损坏的背景图片网址？

$(function(){ 

    // VIDEO LOAD

        var videoLinks = {};

        function clickVideo() {
            // trim off img-
            var postId = $(this).attr("id").substr(4);
            if (videoLinks[postId]) {
                $("#" + postId).html(videoLinks[postId]);
            }
        }

        function storeVideo() {
            var videoDiv = this;
            var postId = $(videoDiv).attr("id");
            var code = $(videoDiv).attr("videohtml");
            $(videoDiv).removeClass("videoNoThumbnail");
            var re = new RegExp("(.*/embed/([a-zA-Z0-9_-]+)\\?)(.*)", "m");
            var match = code.match(re);

            if (match) {
                code = match[1] + "autoplay=1&" + match[3];
                var videoId = match[2];
                var div = $("<div class=videoThumbnail />");
                div.css("background-image",
"url('http://img.youtube.com/vi/" + videoId + "/0.jpg')");



                var img = $("<img src=http://dinakelberman.com/play.png class=playButton />");
                img.attr("id", "img-" + postId);
                img.click(clickVideo);
                div.append(img);
//                two.empty();
                $(videoDiv).append(div);
            }
            videoLinks[postId] = code;

        }

        function updateVideos() {
            $('div.videoNoThumbnail').each(storeVideo);

            setTimeout(updateVideos, 200);
        }

        updateVideos();

})

Answer 1

这可以通过使用ajax请求加载缩略图来实现：当Youtube提供404缩略图时，它实际上以404状态响应。

$.get('http://img.youtube.com/vi/' + videoId + '/0.jpg')
.success(function(d){
    // video not removed: set thumbnail
    div.css("background-image","url('http://img.youtube.com/vi/" + videoId + "/0.jpg')");   
})
.error(function(d){
    // video removed: set your own thumbnail
});

成功案例可以进一步调整：我编写的代码加载相同的图像两次（首先使用ajax请求，然后在设置背景图像时）。您实际上可以使用加载了ajax请求的图像，将响应数据转换为data-uri image background。

但是，要执行此操作，您需要使用binary transport为jQuery请求图像（或使用标准XMLHttpRequest执行此操作）并将数据转换为base64。

如果background-image url是404然后是jquery

1 个答案: