Как мы можем просмотреть видео в угловой JS? - PullRequest
Новая
       15

Как мы можем просмотреть видео в угловой JS?

0 голосов
/ 19 марта 2019

У меня есть функция в приложении Angular.js, где пользователь может загружать типы документов, PDF, изображения, включая видео. Я сделал возможным загружать любые файлы, но я хотел знать, как мы можем просмотреть и воспроизвести видео в формате angular js? Мой HTML-код для просмотра PDF и изображений ниже, и он работает. Как просмотреть и воспроизвести видео?

для просмотра изображений и PDF 

<div class="col-md-12 text-center top30 nopadding">
    <div class="col-md-12 pull-right">
        <a target="_self" href="{$ main.record.preview.preview $}" 
           download="{$ main.record.preview.file $}">
            <button class="btn btn-primary pull-right inline-block">
                <i class="fas fa-download"></i> Download 
            </button>
        </a>
    </div> 
    <div class="col-md-12 pull-right top10">
        <p class="inline-block pull-right">{$ main.record.preview.file $}</p>
    </div>      
</div>

<div class="col-md-12 top10">
    <img ng-class="{'hidden' : main.record.preview.type != 'image'}" style="width: 100%" 
         class="img" src="{$ main.record.preview.preview $}">
    <object ng-class="{'hidden' : main.record.preview.type != 'pdf'}" 
            ng-show="(main.record.preview.preview != undefined || main.record.preview.preview != '') && main.record.preview.type == 'pdf" 
            data="{$ main.record.preview.preview | trusted $}" 
            style="width: 100%;height: 800px"  
            data="{$ main.record.preview.preview | trusted $}" type="application/pdf">
        <embed src="{$ main.record.preview.preview | trusted $}" type="application/pdf" />
    </object>

    <div ng-show="main.record.preview.type == 'others'" 
         class="col-md-12 text-center text-default no-preview" >
        <p><i class="far fa-times-circle"></i> No Preview Available</p>
    </div>
</div>

1 Ответ

0 голосов
/ 28 марта 2019

Я думаю, что вы хотите отобразить предварительный просмотр вашего видео, когда пользователь нажимает кнопку «Предварительный просмотр» или наводит курсор мыши на видео.

Я не знаю какой-либо инфраструктуры, предоставляющей автоматический способ сделать это,хотя, вероятно, некоторые видеохостинги предоставляют его как услугу.

Технология, стоящая за ним, как правило, довольно проста, хотя для ее реализации требуется: 10000 *

  • изображение для предварительного просмотра илиИзображение плаката создается из видео или предоставляется вместе с видео, и это «неподвижное» изображение, отображаемое до того, как вы нажмете «Предварительный просмотр» или наведите на него курсор.
  • оригинал будет отредактирован ранее, отредактирован, а сцены извлечены и объединены вкороткий предварительный просмотр видео, обычно закодированный с гораздо более низкой скоростью передачи и разрешением.Это может быть автоматизированный процесс редактирования - например, выбор нескольких секунд видео с предварительно заданными процентами или раз в видео.
  • это новое видео предварительного просмотра размещается где-то, например, на вашем веб-сайте, и воспроизводится, когда пользователь нажимает кнопку 'Предварительный просмотр »или наводится на неподвижное изображение.
    • когда пользователь хочет воспроизвести полное видео, он может нажать кнопку «Воспроизвести» или щелкнуть на предварительном просмотре, а затем сайт переключится на потоковую передачу полного видео, где бы оно ни размещалось.
...