Rails/JS - 延迟后更新视频源 src

Question

当有人在我的应用程序中上传视频时，它会在 AWS Lambda 中进行处理，大约需要 90 秒。

我希望能够显示这个更新的视频而无需重新加载 Show.html.erb 页面

通过实例@aws_url访问视频的路径

我的 controller 中的Show 方法：

def show
    @gif = Gif.friendly.find(params[:id])
    gon.gif = @gif
    ...
    if Rails.env.production?
       @aws_url = @gif.video.attachment.service_url.sub(/\?.*/, '')
       @aws_url = @aws_url.insert(21, '-resized')
       @aws_url = @aws_url + '.mp4'
    end 
end

show.html.erb页面中的相关部分：

<div id="video">
   <video width="300" controls autoplay loop mute>
      <source src=<%= @aws_url %> type="video/mp4" />
   </video>
</div>

和JS。 在这里，我在一段时间内显示进度条，之后我想隐藏进度条并显示视频。 我试图将@aws_url 传递给“#video”元素，但这只会导致显示<%= escape_javascript(render @aws_url) %> 。

$(function(){
    if($("#gif_show").length > 0) {

            document.getElementById('video').style.visibility = "hidden";
            var bar1 = new ldBar("#myItem1");
            var bar2 = document.getElementById('myItem1').ldBar;
            bar2.set(100);

            var milliSecTime = gon.target_time * 1000;
            setTimeout(function() { 
                $('myItem1').innerHTML = "";
                $("#video").html("<%= escape_javascript(render @aws_url) %>");
                $('video').style.visibility = "visible";

            }, milliSecTime);
    }
});

任何建议，将不胜感激

Answer 1

解决方案

我的错误是混淆了哪个 html 元素通过 url 以及如何配置这些元素。 视频源可以在 JS 文件中创建，然后附加到现有的视频元素中。

此外，视频 ID 应如下所示：

<video width="300" controls autoplay loop mute id="video">        
</video>

JS文件：

$(function(){
    if($("#gif_show").length > 0) {

            document.getElementById('video').style.visibility = "hidden";
            var bar1 = new ldBar("#myItem1");
            var bar2 = document.getElementById('myItem1').ldBar;
            bar2.set(100);

            var milliSecTime = gon.target_time * 1000;

            function addSourceToVideo(element, src, type) {
                var source = document.createElement('source');

                source.src = src;
                source.type = type;

                element.appendChild(source);
            };

            setTimeout(function() { 

                var video = document.getElementById('video');

                addSourceToVideo(video, gon.aws_url, 'video/mp4')

                document.getElementById("myItem1").innerHTML = "";

                document.getElementById('video').style.visibility = "visible";
                video.play();
            }, milliSecTime);
    }
});