Rails / JS - обновление источника видео sr c после задержки - PullRequest
Новая
       5

Rails / JS - обновление источника видео sr c после задержки

0 голосов
/ 17 апреля 2020

Когда кто-то загружает видео в мое приложение, оно обрабатывается в AWS Lambda, что занимает около 90 секунд.

Я хочу иметь возможность показывать это обновленное видео без перезагрузки шоу. html .erb page

Доступ к пути к видео осуществляется через экземпляр @aws_url

Метод 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);
    }
});

Будем благодарны за любые предложения

1 Ответ

0 голосов
/ 17 апреля 2020

SOLUTION

Моя ошибка заключалась в том, что я путал, какой элемент html передает URL и как настраивать эти элементы. Источник видео можно создать в файле JS, а затем добавить к существующему элементу видео.

Кроме того, идентификатор видео должен выглядеть следующим образом: 

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

JS file: 

$(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);
    }
});
...