How to get a thumbnail from an embedded video? - javascript

I am trying to embed a video into a webpage using lightbox. From a design perspective, how should I place the video on the page.
I mean the videos are lined up across the page as thumbnails. Should I take a frame from the video and display that as an image that the user clicks? Or does the various video plugins take care of creating the thumbnail for you?

If you're using HTML5, the thumbnail of a video is defined using the 'poster' attribute in the video tag. Here's an example:
<video width="500" height="375" poster="myThumbnail.jpg" preload="none" controls="controls">
<source src="http://hostname.com/myVideo.webm"/>
</video>
If you want to create this image automatically using a given frame of the video, you should check the link posted by F. Calderan

Related

HTML5 video player ,How to control on progress bar?

I search for solution in many questions but I didn't get answer, I have HTML5 video play :
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
<source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>
it works fine but I cant control in progress bar ,I can't move video forward or backward ,How can I do that ?
is anyone can help ?
Video Link
https://streamable.com/k3rved
You HTML5 looks fine - the video below will allow moving forwards and backwards using the scroll bar as a working example to refer to:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
If the issue is the lack of thumbnails when you hover over the progress bar, then these need to be generated separately on the server side and included in the video container (e.g. mp4) that you make available.
Update
The video link in the question above is not actually a link to a video, rather it is a link to a webpage.
This webpage does indeed contain a video, along with the videoJS player, when you inspect it, but you can't use the webpage link as the 'src' attribute in a HTML5 video.
Assuming you have permission to use the video, you can extract the src from the video at that webpage. This works in this case, at the time of writing anyway - sometimes videos in a webpage will have access restrictions or authentication requirements to prevent them being accessed from other sites.

Can not run video with link embed youtube

I can run video with link embed youtube.
My code:
<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
poster='' data-setup='{}'>
<source src='https://www.youtube.com/embed/fZ-yXDJJj5g'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
Video is show loading but don't play.
Please help me
As stated on the official repo, video.js doesn't support youtube video out of the box, you need to use a plugin for that:
It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins)
So you'll have to use a plugin for that, like for example this one.
HTML5's video tag only works with video files. It doesn't work with Youtube video links(As those links do not point to source of video, instead they are a pointer to an HTML page). For that either you have to find storage link of video, which is not a good practice. Because Youtube can change that anytime. Better to use iframe for displaying Youtube video on your website.
You could just use tag then pass the src of the video. or even embed just like this.
<iframe id='my-video' class='video-js' width="640" height="264" src="https://www.youtube.com/embed/fZ-yXDJJj5g">
</iframe>
or
<embed id='my-video' class='video-js' width="640" height="264"
src="https://www.youtube.com/v/tgbNymZ7vqY">
then target those id to perform whatever you wanted to do.
I've encountered this problem, video tag does not work on this scenario.
So, I've research you can use iframe tag or embed then play with it into the script.

How to play youtube video with default html5 controls?

I'm so sorry, but I can't get a youtube video to play (https://www.youtube.com/watch?v=SyRv0-oPfKE) inside a video tag.
I know about the iframe API but in this case it has to have the default html5 controls, not the youtube controls.
I probably missed something stupid but can't figure it out...
Anyone know how to do this?
EDIT:
so I tried:
<video
controls='controls'
src={`http://www.youtube.com/get_video_info?&video_id=${id}&asv=3&el=detailpage&hl=en_US`}
type='video/mp4'
/>
and tried:
<video
controls='controls'
src={`https://www.youtube.com/watch?v=SyRv0-oPfKE&html5=1`}
type='video/mp4'
/>
but I get blank page.
The HTML video element expects video files as a source. If you want to play a YouTube video using the native HTML video player, you'll have to provide a link to the video itself, not to the YouTube website for this video.
Also keep in mind, that not all browsers can handle any video formats. See MDN: Media formats for HTML audio and video.

How to play .asf and .xesc video file on website?

I have two different video files. One is of .asf format and another is of .xesc format. How can I play these video files on my website?
The best solution is to upload it to a video-streaming service (such as YouTube) and play it on your website as an embed video. Then you do not have to worry about streaming the video - which can drag the speed of your entire website down.
However you can also convert the video to a supported HTML5 format and upload it to your server and use HTML5 builtin video player (not recommended).
You should use the video tag - HTML5 feature
<video height="500" width="500" controls>
<source src="source/of/the/video/" type="video/type" />
Can't play this video right now...
</video>
If you do not want to convert it, you may want to check out this answer

Four videos on a page, slows down browser

Videos are around 30 seconds long 15mbs, is it possible to have them on a page or should I switch to cover images, I want to use the video as separator smilier to http://themeforest.net/item/luv-responsive-wedding-event-wordpress-theme/full_screen_preview/9410071
Do anyone have any advice or recommendation
A good idea would be to make the videos compressed to their max (like smallest dimensions and framerate while maintaining quality).
If you can, defer the load of the videos until after page load (jquery or javascript) by setting the url of the video after load. What about loading an iframe? This question could be help: should embedding video in home page slow down the page?
You could also stream the video.
Or you can make a cover image, as you said, and load it when the user clicks on it. That could be done something like this:
<video width="520" height="300" poster="link to the cover image" controls>
<source src="link to the video" type="video/mp4">
</video>

Categories