用于查看图像和pdf

Question

我的Angular.js应用程序中有一个功能，用户可以在其中上传文档类型，pdf，包含视频的图像。我可以上传任何文件，但是我想知道我们如何在angular 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

我认为您想在用户单击“预览”按钮或将鼠标悬停在视频上时显示视频的预览。

虽然有些视频托管站点可能会将其作为服务提供，但我仍然意识到任何框架都提供了实现此目的的自动化方法。

它背后的技术通常很简单，尽管要执行一些工作：

从视频中创建预览图像或海报图像或将其提供给视频，这是单击“预览”或将鼠标悬停在其上之前显示的“静止”图像。
将对原始图像进行先前的编辑编辑，并提取场景并将其合并为简短的预览视频，通常以较低的比特率和分辨率进行编码。这可能是一个自动编辑过程-例如在视频中以预定义的百分比或时间选择几秒钟的视频。
此新的预览视频托管在某个地方，例如在您的网站上播放，并在用户单击“预览”或将鼠标悬停在静止图像上时播放。
- 当用户想要播放完整视频时，他们可以单击“播放”按钮或单击预览，然后网站切换为在托管的任何地方流式传输完整视频。

我们如何在Angular JS中预览视频？

用于查看图像和pdf

1 个答案: