loading="lazy" but for html5 videos - javascript

I'm making a scroll-able gallery with flask that shows many<video> elements, the video files are small but it still generates a lot of http 206 requests, which are bottle-necking flask.
<img> has loading="lazy", which is very convenient.
Is there some way, javascript only or css, to implement such behavior but for <video>?
I may use preload="none", but it won't display the first video frame.

you may use a part of this solution :
<video preload="none" src="video.mp4"
autoplay="false" poster="poster.jpg"
muted="false" loop="false">
</video>
If preload is none, the web browser don't preload the media, but i advice to replace an image with poster attribute.
Preload explanation here
autoplay explanation here
loop explanation here
poster explanation here

Related

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.

Gfycat video in Safari

I'm embedding gfycat video on a page without iframe.
Gfycat stores videos in three different places, depending on it's size: zippy for small, fat for bigger and giant for the largest. I know only video ID and don't know where it is stored.So, I just add sources for each store.
Here's code repeating the inner structure of iframe embed:
<video preload="none" loop>
<source src="//zippy.gfycat.com/{{ID}}.mp4" type="video/mp4">
<source src="//fat.gfycat.com/{{ID}}.mp4" type="video/mp4">
<source src="//giant.gfycat.com/{{ID}}.mp4" type="video/mp4">
</video>
After it I call play method, here's exemplary JS:
video_element.play();
For example, this video stores at giant store. So, first two sources responses with 403 code, but last source is valid and video is playing.I understand that this is not really beautiful solution, but it it works well in Chrome, Firefox and Opera. But not in Safari.
Safari applies first source, it responses 403 and then other two sources doesn't apply automatically, as it happens in other browsers.
So, haw can I solve this problem? Given that I can use only JS, do not know the store and can't use iframe.
Here's jsfiddle to test.
It's not good practice to formulate urls in that fashion as they could change at any time. In fact, it looks like the zippy and fat subdomain urls are not being used by Gfycat anymore.
You should instead use their api to retrieve the data in JSON format and use javascript to update the source urls of the video element.
You may want to check this out: https://github.com/gfycat/gfycat.js

Disable the HTML5 information from YouTube Embedded Video [duplicate]

I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.

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>

How to get a thumbnail from an embedded video?

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

Categories