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>
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 - e.g. selecting several seconds of the video at predefined percentages or times through the video.
this new preview video is hosted someplace, e.g. 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.
Related
I am trying to differentiate PDF downloads from PDF opens in a new tab/browser withing Google Analytics or Google Tag Manager
I have two HTMLs
<a href="#" class="resource__link link-download link-file link-file--pdf" rel="noreferrer noopener" target="_blank" download="" modaldialog="[object Object]">
<div class="p-0 resource__border card card-body">
<div class="resource__outer-div ">
<div class="resource__img"><img alt="Product Insert" src="/content/_assets/images/Placeholder/file.png"></div>
<div class="pl-4">
<p class="resource__title card-text">Product Insert</p>
<p class="d-block resource__size card-text">454 KB</p>
</div>
</div>
</div>
<span class="sr-only">This links to a pdf file</span>
</a>
The one above downloads the PDF.
Prescribing Information<span class="sr-only">This links to a pdf file</span>
The one above opens in a new link
I want to add a custom dimension that shows whether the clicks lead to a download or a new tab.
Any ideas?
Thank you
I want to add a close button to an image that I opened in my Image gallery. I have used the 'img' tag inside the anchor tag, where it should display a particular image of full size within the same page and want to close the image and come back to the main page.
I have came across doing this solution with Jquery, Is there anyway it can be done with javascript??
index.html
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="/dist/images/myImg.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg.jpg">
</a>
</div>
<div class="image-gallery-item">
<a href="/dist/images/myImg2.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg2.jpg">
</a>
</div>
I am trying to make a website for my friend's Graphic Design company.
I keep getting this bug where the <img> and <video> just displays my container without any Images/Video in it just a black box. Not even my alt's?? I've never had this happen before.
I do have quite a lot of stuff going on in my stylesheet; including beizer transformations on the container, would that be a problem as it was working, but I changed the image dimensions.
My question is, how do I debug this/ how do I get it to just display my photos in my container.
Edit: I'm 2nd year CompSci but am new to HTML/CSS
My image and mp4 is in the same directory of my index.html in the img and vids folder:
website/img/Sunburnt.jpg
website/vids/statuspr.mp4
website/index.html
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"><span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="#">
<div class="project__image-container plane plane--media">
<!-- The preferred img, mp4s -->
<img src="/img/Sunburnt.jpg" alt="Sunburnt Breakfast Rave" />
<video src="vids/statuspr.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
I cant comment so i try as an answer even though its not 100% clear:
Just looking at your code:
you use a / before the img folder only with the image.
If you're not looking at the file from a server, this will give a 404..
debug using F12, and look at network errors or console errors
So I was able to fix this by creating a new container (project__image-container2) which used a less intricate implementation of CSS in my stylesheet.
I also changed up my src from data-src and just including my images and videos in my project. The combination of these two solutions did solve my problem - that I could not display images and videos withing these containers - however, my website now loads said videos and images quite slowly. However that is something I can try and fix later.
<!-- Project 1: Sunburnt Breakfast -->
<div class="section section--work" data-label="Project 01">
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"> <span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="website-I-don't-want-the-world-to-know-about">
<div class="project__image-container2 plane">
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
<noscript>
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</noscript>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
<button class="section__nav section__nav--left noselect clickable"><span class="text--giant text--bold"><span>Back</span></span></button>
<button class="section__nav section__nav--right noselect clickable"><span class="text--giant text--bold"><span>Next</span></span></button>
</div>
I hope that this helps anyone facing this niche problem out there. DM me or comment and I will try to help you through it if you are struggling with this issue too.
Thank you to everyone who helped me get here. Love my stackoverflow community !!! Yall the best xx
I have an ng-repeat in my html that creates around 750 divs (i am producing labels for my products), i have designed them how i would like them to look and i am happy with this, but as they are quite big the print preview doesn't look anything like my design.
I want to know if it is possible in Angular to easily iterate through each of the ng-repeat items and save them as a png?
Below is my ng-repeat :
<div class="col-lg-4" ng-repeat="p in productcodes">
<div class="contact-box" style="padding:0px !important;height:370px;width:650px;">
<span ui-sref="profile">
<div class="col-lg-3" style="padding:0px">
<img alt="image" class="img m-t-xs img-responsive rotateimage" style="max-width:1000% !important;width:200%" ng-src="">
</div>
<div class="col-lg-2" style="padding:0px">
<div >
<h3 style="margin-top:45px;">Code:</h3>
<h3>Colour:</h3>
<h3>Item:</h3>
<h3>EN Cert:</h3>
<h3>Size GB:</h3>
<h3>Size SE:</h3>
<h3>Size EU:</h3>
<h3>Length:</h3>
</div>
</div>
<div class="col-lg-3" style="padding:0px">
<h3 style="margin-top:45px;"><strong>{{p.pcode}}</strong></h3>
<strong>
<h3>{{p.Colour}}</h3>
</strong>
<h3>
{{p.shortdescription}}</h4>
<h3>N/A</h3>
<strong>
<h3>{{p.Size}}</h3>
</strong>
<h3>C62</h3>
<h3>3XL+</h3>
<strong>
<h3>{{getsize(p.SizeCode)}}</h3>
</strong>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" style="padding:0px">
<img alt="image" class="img-circle m-t-xs img-responsive" style="margin-top:60px;width:200%;" src=".{{p.localimg}}">
</div>
<div class="clearfix"></div>
</span>
</div>
</div>
I want to know if it is possible in Angular to easily iterate through
each of the ng-repeat items and save them as a png?
Short answer
No
Long answer
Save as png where? You can store them on server side or your comp. Its not related to Angular. For example, if you would use cloudinary as image storage, you will be able to transform image resolutions for preview by changing URL:
http://res.cloudinary.com/demo/image/upload/w_70,h_53,c_scale/turtles.jpg:
http://res.cloudinary.com/demo/image/upload/w_30,h_23,c_scale/turtles.jpg
Further, its not good practice to show 750 images at once, you gonna kill your web page. Keep in mind, after 2K of watchers the web view performance slows down.
I believe if you have fixed height of ng-repeat item, I would use infinite scrolling. For example take a look on Google Material virtual Repeat approach.
Other solution
If your image preview is small, you can convert image to base64 and it will save you from calling 750 HTTP requests
Background:
I administer an Amazon shop for a category that is unsupported by the Amazon bulk upload tool. The shop contains (once this question is resolved) +150 individual products with 6-9 preview images each and in 6 EU sites (huge manual upload effort).
I decided to use Selenium and my basic python skills to automate the upload.
Problem:
All works perfectly fine except for image upload. I had used this code in the past to send images into an input field:
driver.find_element_by_css_selector('input[type="file"]').send_keys('path/to/local/image')
Modifying this to fit to the image upload page in question:
driver.find_element_by_id('main_image_url').send_keys('path/to/local/image')
Returns a sea of red:
File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 192, in check_response
raise exception_class(message, screen, stacktrace)
ElementNotVisibleException: Message: element not visible
(Session info: chrome=53.0.2785.116)
(Driver info: chromedriver=2.23.409710 (0c4084804897ac45b5ff65a690ec6583b97225c0),platform=Mac OS X 10.11.6 x86_64)
Also tried:
I have read around a bit but my knowledge of Javascript is null so I have blindly tried a few javascript snippets to make the element visible first to no avail.
driver.execute_script('document.getElementById("main_image_url").style.visibility = "visible";')
I've also read some solutions involving trying to navigate the actual dialogue window with complicated combinations of send_keys() but sound like trouble.
I'm on a Mac and using the Chrome driver.
Any tips much appreciated
HTML element of page:
<div id="main_image_url-wrapper" class="a-row a-spacing-medium input-container">
<div data-attribute-name="main_image_url"
data-image-index="0" class="a-row a-grid-vertical-align a-grid-center ilui-image-input-container image-not-selected hide-remove-button ilui-post-attribute">
<input id="main_image_url" name="main_image_url"
value="" cssClass="image-source-of-truth"
type="hidden" autocomplete="off"
/>
<div class="a-row">
<label for="main_image_url" class="label">
<span class="attribute-label-text">Main Image
<span class="a-size-base a-color-tertiary a-text-italic a-text-normal">
(required)
</span> </span> <span class="a-declarative"
data-action="a-popover" data-a-popover="{"name":"attributeHelpmain_image_url","inlineContent":"The URL where a main image of the product is located. It's important that this is supplied for all products."}">
<span class="help-icon"></span> </span>
</label>
</div>
<div class="a-row ilui-image-wrapper ilui-visualization-element">
<span class="a-declarative" data-action="image-select-main_image_url"
data-image-select-main_image_url="{}"
id="image-container-declarative">
<div tabindex="0" class="ilui-image-select-container">
<div id="image-camera-icon" class="icon-container">
<i class="icon"></i>
<ul class="a-nostyle a-vertical error-list image-error-list"></ul>
</div>
</div>
</span> <img src="" class="ilui-img-thumbnail"
/>
<div class="image-loading-overlay a-hidden">
<div class="a-section upload-progress-meter image-progress-bar">
<div class="a-meter" aria-label="0%">
<div class="a-meter-bar"
style="width: 0%;"></div>
</div> <span class="percentage"></span> </div>
</div> <span class="a-declarative" data-action="image-remove-button-main_image_url"
data-image-remove-button-main_image_url="{}">
<div tabindex="0" class="remove-image-button">
<i class="a-icon a-icon-close"></i>
</div>
</span> </div>
</div>