我們如何在角度JS中預覽視頻？

Question

我的Angular.js應用程序中有一個功能，用戶可以在其中上傳文檔類型，pdf，包括視頻的圖像。 我已經可以上傳任何文件，但我想知道如何在角度js中預覽和播放視頻？ 我的用於查看pdf和圖像的html代碼在下面，並且正在運行。 如何預覽和播放視頻？

用於查看圖像和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>

Answer 1

我認為您想在用戶單擊“預覽”按鈕或將鼠標懸停在視頻上時顯示視頻的預覽。

我很想知道任何提供自動化方法的框架，盡管有些視頻托管站點可能會將其作為服務提供。

它背后的技術通常很簡單，雖然需要一些工作來實現：

• 預覽圖像或海報圖像是從視頻創建的，或隨視頻一起提供，這是在您單擊預覽或將鼠標懸停在其上之前顯示的“靜止”圖像。
• 原始圖像將經過先前的編輯編輯，場景被提取並合並為一個簡短的預覽視頻，通常以較低的比特率和分辨率進行編碼。 這可能是一個自動編輯過程-例如，以預定義的百分比或遍歷視頻的時間選擇幾秒鍾的視頻。
• 這個新的預覽視頻托管在某個位置，例如在您的網站上，並在用戶單擊“預覽”或將鼠標懸停在靜止圖像上時播放。
  • 當用戶想要播放完整視頻時，他們可以點擊“播放”按鈕或點擊預覽，然后網站切換到整個視頻流，無論它在哪里托管。