I am using video tags and jQuery to display a HTML5 video playback.
How can I show an image while the video is still loading for displaying?
I would use jQuery for this..
Thanks in advance!
PD: Display an image when the video preloads.
There is no need for JQuery to achieve this as the html5 video tag comes with its own poster attribute. You can use that to specify what image should be displayed while the video loads. For instance if you have an image called myImage.jpg you can do the following: <video controls="controls" poster="myImage.jpg">. Refer here for more info:
https://www.w3.org/wiki/HTML/Elements/video#HTML_Attributes
Related
I'm trying to make a website where a video is played at the background. So far, I used the video tag and used a link in source attribute. But, I'm not able to see the video in the background. Is it possible to just include a absolute link to the website without downloading the video?
<video autoplay muted loop
source src="https://www.pexels.com/video/aerial-view-of-beautiful-resort-2169880/">
</video>
We all know that to play a video on a web page in the most basic way you would use something similar to this html code
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
However, while snooping around in the inspection feature on a number of different websites and having a look at the tags inside elements, i cant help but notice that some video platforms at times appear to just use a <div></div>.
Heres two examples
youtube:
If you inspect any video page on Youtube and then right click the video and inspect the html you will see <video></video> tag however if you click on the video tag (to initiate the hover state) and the click fullscreen you will see that the video tag seems to disappear and become a div. Here is the link to a youtube video page if you want have a look yourself https://www.youtube.com/watch?v=-h0MaGc7nx0.
Twitch:
If you go on a twitch video page they don't seem to use <video></video> tags at all, they use <div></div> tags. Initially i thought it was because they do live videos so things work a bit differently but if you have a look at live facebook gaming videos you will notice its the use the conventional <video></video> tags. Here is the link to a twitch video page so that you can have a look yourself https://www.twitch.tv/videos/368024918. Here is a link to facebooks gaming page so that you guys can also have a look and compare https://www.facebook.com/gaming/?external_ref=games_video_bookmark.
This sparks my curiosity conciderably. How do they do that? And why would a programmer or company choose this way over the conventional method?
All the examples you gave use the video tag behind the controls. When you inspect it, you see a div with controls, but if you'll dig deeper (or above) you'll see the video hiding.
They make it that way to have more control on the styling of the player and it's controls. Instead of using the default buttons, you can see buttons for pause, play, mute, etc, that onclick uses the video api. That also allows them to pause the video on click anywhere, or to add the cards on the last few seconds on a YouTube video.
There is a way to play a video without the video tag, using old school flash (that's how websites played video before html5) or canvas, by drawing frame after frame (even using canvas, most of the time there is a video tag to get the frames to draw).
MIME type is accepted, I've checked.
Here is how it is looking like: https://trello-attachments.s3.amazonaws.com/5441bde46b6fcb86daf55d73/594x351/122b8cad9f5824c44fa25fb242569312/upload_5_14_2015_at_5_10_18_PM.png
Here is the website in question (go to animation in menu): www.ivocunha.com
Here is the code I'm using:
<video width="100%" height="100%" controls autoplay loop class="bl-box fancybox-effects-d" title="Walk">
<source src="img/animation/walk.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Why doesn't it autoplay?
Firstly you are using section tags to wrap your video in you should not use sections for content that does not have a heading. It is not a wrapper.
as for your video remove auto play because they are auto playing by the looks of it but using auto play within your video tag triggers auto play from page entry and they are all playing at the same time.
you then want to use your jquery and create an on hover that will play your video and pause it on exit. your code doesnt seem to be doing that at all on your site instead its only trigering for points.
I would give this a read over so you can see how to use the api properly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
I have a jsfiddle here - http://jsfiddle.net/fzzgjem4/2/
I'm using the video tage to show a vimeo video.
I would normally use the iframe from vimeo but I want it full width and without the vimeo controls.
I'm getting the src from 'Use your own player section' in vimeo.
The video will come from a CMS so I just want to be able to add the id for the video.
The jsfiddle does not work in Firefox.
Is this becasue it's the wrong format?
Is it possible to use the video tag to show vimeo videos
<video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" autoplay muted></video>
I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.