How we can preview a video in angular JS?

Question

I have a feature in my Angular.js app where in user can upload type of documents, pdf, image including video. 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? My html code for viewing pdf and images is below and it is working. How do I preview and play video?

for viewing image and pdfs

<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

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:

• a preview image or poster image is created from the video or provided with the video and this is the 'still' image displayed before you click preview or hover over it.
• the original will have been previously edited edited and scenes extracted and combined into a short preview video, generally encoded at a much lower bitrate and resolution. This may be an automated editing process - eg selecting several seconds of the video at predefined percentages or times through the video.
• this new preview video is hosted someplace, eg on your website, and played when the user click 'preview' or hovers over the still image.
  • when the user wants to play the full video they can click a 'play' button or click on the preview and the site then switches to stream the full video wherever it is hosted.