[英]How we can preview a video in angular JS?
I have a feature in my Angular.js app where in user can upload type of documents, pdf, image including video. 我的Angular.js应用程序中有一个功能,用户可以在其中上传文档类型,pdf,包括视频的图像。 I have made it possible to upload any files but I wanted to know how we can preview and play a video in angular js?
我已经可以上传任何文件,但我想知道如何在角度js中预览和播放视频? My html code for viewing pdf and images is below and it is working.
我的用于查看pdf和图像的html代码在下面,并且正在运行。 How do I preview and play video?
如何预览和播放视频?
<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>
I think you want to display a preview of your video when the user clicks a 'preview' button or hovers over the video. 我认为您想在用户单击“预览”按钮或将鼠标悬停在视频上时显示视频的预览。
I an mot aware of any framework providing an automated way to do this, although it is likely that some video hosting sites provide it as a service. 我很想知道任何提供自动化方法的框架,尽管有些视频托管站点可能会将其作为服务提供。
The tech behind it is generally quite simple, although takes some work to implement: 它背后的技术通常很简单,虽然需要一些工作来实现:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.