javascript - 我们如何在 Angular JS 中预览视频?
问题描述
我的 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>
解决方案
我认为您希望在用户单击“预览”按钮或将鼠标悬停在视频上时显示视频的预览。
我不知道有任何框架提供了自动执行此操作的方式,尽管某些视频托管站点可能将其作为服务提供。
它背后的技术通常很简单,尽管需要一些工作来实现:
- 预览图像或海报图像是从视频中创建的或随视频一起提供的,这是在您单击预览或将鼠标悬停在其上之前显示的“静止”图像。
- 原件将事先经过编辑,提取场景并组合成一个简短的预览视频,通常以低得多的比特率和分辨率进行编码。这可能是一个自动编辑过程——例如,以预定义的百分比或时间在视频中选择几秒钟的视频。
- 这个新的预览视频托管在某个地方,例如在您的网站上,并在用户单击“预览”或将鼠标悬停在静止图像上时播放。
- 当用户想要播放完整视频时,他们可以单击“播放”按钮或单击预览,然后该站点将切换到流式传输完整视频,无论其托管在何处。
推荐阅读
- mqtt - mosquitto:记录消息内容
- git - 如何备份当前状态(包括未跟踪的文件),以便以后可以检查它们
- hadoop - 403 与 hadoop-aws 和 s3proxy
- php - 当用户没有照片时如何解决 404 错误?
- sql - SQL Server 使用 FOR XML PATH 按组连接多行
- react-native - SVG没有正确显示
- go - 有没有一种惯用的方法来通过 Go 中的类型断言接口进行索引?
- javascript - 使用 JavaScript 插入 ERB
- angularjs - 使用 NgUpgrade 启动 Karma 时出现意外拒绝
- php - vue.js v-on:click.native 没有在刀片文件 laravel 中触发