I want to insert a video into my HTML page with the video tag. Here is my markdown (I am developing an ASP.NET MVC application, and symbol ~ means project root):
<video controls>
<source src="~/show.mp4" type="video/mp4">
Cannot load the video.
</video>
But it just shows white space with video controls. Here is a screenshot:
And the slider in the video controls does not move (i.e. the video is not playing), although the "pause" icon is shown, which should mean: the video is playing.
What I have tried
Adding src attribute to video tag.
Opening the menu in the right of video controls panel and clicking "Download". It downloaded my video. When I played it with Windows Media Player, it showed exactly what I have recorded.
Removing type attribute from source tag.
Removing source tag (and leaving only src attribute in video tag).
Moving the slider in video controls panel. Still white space.
Setting controls="controls" in video tag.
Surfing the Internet (including Stack Overflow).
Now I asked my own question.
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
My video poster appears in Chrome / Firefox but is not displaying in Safari. My play button appears and I can play the video, but the poster is a no show. Mark up is below. Any thoughts?
<video id="video" controls poster="/assets/img/background/simon.jpg">
<source src="/assets/img/video/want-it.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="/assets/img/video/want-it.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<object data="" type="" class="simon">
<img src='/assets/img/background/simon.jpg' title="Your browser does not support video">
</object>
</video>
Thats coz its the default safari behaviour they load the video as soon as its first frame is ready to play. one thing that temporarily shows the poster is to set the preload attribute to none on the video tag. preload="none" but again the poster will go away as soon as the video disappears. Following is a hacky way I did it in React but you can adjust it for any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
I am having an issue with getting HTML5 video to autoplay on load into Fancybox.
I have an HTML5 video loaded into a div that is hidden and therefore can't have autoplay enabled in the tag. I then call it one an image click with a Fancybox inline and a ref to the div.
Everything works as it should except I just want the video to play when then Fancybox opens it?? Any ideas would be appreciated.
You can autoplay the video as soon as it is opened in fancybox. The problem with the inline video is that if you close it then it will pause and the next time you open it in fancybox, the video will be open in the same place/track it was when closed ... and it won't "auto-resume" (the action is autoplay on start).
Anyway, this option should do the trick:
'onComplete': function(){
$("#myVideo").find('video').attr('autoplay','autoplay');
}
#myVideo is the ID of the DIV, which contains the video tag.
Since you are using the inline method, it would worth to have a look at one existing bug and its workaround here.
Eventually, you may prefer to use the API option 'content' instead, to avoid the inline type issues:
'content': '<video autoplay="autoplay" preload="none" poster="path/image.jpg" width="640" height="360" controls="controls"><source autoplay="autoplay" src="path/video.ogg" type="video/ogg">your browser does not support the HTML 5 video tag</video>'