HTML5 Video 和 jQuery Lazyloading，未添加控件

Question

我在使用 jQuery 来“延迟加载”HTML5 视频元素时遇到了一些麻烦。

以下html标记：

<section class="video_content" data-poster="imageURL" data-alt="" data-mp4="mp4URL"data-webm="webmlink" data-ogg="ogvlink" data-preload="metadata" data-controlslist="nodownload" data-oncontextmenu="return false" data-onselectstart="return false" data-ondragstart="return false" style="height: 647px;"> <img width="1280" height="720" src="imageURL" class="video_img wp-post-image" alt=""><div class="video-play-button video-control"><i class="fa fa-play"></i></div>

以及以下 jQuery 逻辑：

$(video_play).on('click', function(){

        var vid_container = $('.video_content');
        var poster = vid_container.data("poster");
        var alt = vid_container.data("alt");
        var preload = vid_container.data("preload");
        var controllist = vid_container.data("controlslist");
        var oncontext = vid_container.data("oncontextmenu");
        var onselect = vid_container.data("onselectstart");
        var ondrag = vid_container.data("ondragstart");
        var video_markup = '<video class="video work" poster="' + poster + '" controls></video>';

        $(video_markup).appendTo('.video_content');
        var mp4src  = '<source type="video/mp4" src="' + $('.video_content').data("mp4") + '">';
        var webmsrc = '<source type="video/webm" src="'+ $('.video_content').data("webm") + '">';
        var oggsrc  = '<source type="video/ogg" src="' + $('.video_content').data("ogg") + '">';
        var imgsrc  = '<img class="" src="' + poster + '" alt="' + alt + '">';
        $(mp4src).appendTo('.video.work');
        $(webmsrc).appendTo('.video.work');
        $(oggsrc).appendTo('.video.work');
        $(imgsrc).appendTo('.video.work');

        $(video_play).toggle();
        $(".video_img").toggle();
        $(".video.work").load();
        $('.video.work').get(0).play();
    });

所以一切正常： 在页面加载时，仅加载海报图像并创建视频元素并填充来自“video_content”-div 的数据。之后图像设置为 display:none 并且视频开始播放。 播放器的原生控件不知何故丢失了？

这是 jQuery-Funktion 之后的标记变化：

<section class="video_content" data-poster="imageURL" data-alt="" data-mp4="mp4URL" data-webm="webmlink" data-ogg="ogvlink" data-preload="metadata" data-controlslist="nodownload" data-oncontextmenu="return false" data-onselectstart="return false" data-ondragstart="return false" style="height: 647px;">
<img width="1280" height="720" src="imageURL" class="video_img wp-post-image" alt=""><div class="video-play-button video-control"><i class="fa fa-play"></i></div>  
<video class="video work" poster="imageURL" controls><source type="video/mp4" src="mp4URL"><source type="video/webm" src="webmURL"><source type="video/ogg" src="ogvURL"><img class="" src="imageURL" alt=""></video></section>

你可以看到属性“控件”被正确添加。 在 Firefox 和 Chrome 上进行了测试。

Answer 1

试试看：跟随下一个想法。

var video_markup = $('<video class="video work" poster="' + poster + '" controls></video>');
video_markup.appendTo('.video_content');
video_markup.load(); //or video_markup.get(0).load()   ?
video_markup.get(0).play();