Embedding Video via HTML5 - html

I'm attempting to embed video via HTML5 and leveraging video.js http://www.videojs.com/
Seems to be working fine on Mac Chrome. Video start immediately. However, on Mac Safari - not so much. Video opens paused at the first frame and just sits till (apparently) the entire thing is loaded.
Makes sense that the video has to load. But what is going on with Chrome that mitigates that, and why is the lag so apparent with Safari?
And what can I do to prevent the delay (e.g., I would like the video to start immediately when the page is loaded).
<div>
<video width="640" height="360" preload="auto" autoplay="autoplay" loop="loop" >
<source src="href="/sites/default/files/videos/original/1918_Pandemic_Flu.mp4" type="video/mp4" />
No flash player has been set up. Please select a player to play Flash videos.</video>
</div>

add controls autoplay The autoplay attribute is a boolean attribute.
When present, the video will automatically start playing as soon as it can do so without stopping.since some times MIME types not support in browser
or <video loop autoplay width='100%' height='100%' src='//video.mp4' type='video/mp4'></video>
or
<video loop autoplay controls="true" width='100%' height='100%' src='//video.mp4' type='video/mp4'></video>

Related

HTML Video Not Playing Audio

I am trying to play an mp4 file I have stored locally on my computer (when I play it with quicktime it works perfectly). For some reason however I can't get it to work with sound. If I include the 'muted' keyword, the mp4 plays, however with no sound (makes sense). However if I remove the 'muted' keyword, it doesn't play at all.
Any ideas what I am doing wrong?
Here is my code:
<video id="introVideo" width="50%" height="100%" autoplay loop muted>
<source src="../static/myvideo.mp4" type="video/mp4">
</video>
Did you tried with another web browser? Because autoplay is not allowed and even more on sounds with Chrome
This may be a little late, but starting in Chrome 66 autoplay doesn't work unless the muted attribute is included.
So in Chrome you can autoplay a muted video or autoplay won't work.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
Edit:
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html
Search for 'autoplay' in the chromium blog link.

Video not autoplaying when i use poster image

I have a simple problem.
I want to use an image until the video downloads to cache. And after video download is finished, the video must autoplay. So, I used "poster" attribute for image. But now video autoplay is not working.
<video width="100%" height="100%" autoplay loop poster="img/loading.gif">
<source src="img/myvideo.mp4" type="video/mp4">
</video>
I don't want to use "controls" attribute. How can I solve this problem?
Could potentiality be this Google chrome disables autoplay
Chrome and i believe Firefox have disabled autoplay on websites. Users have to allow video's to be autoplayed.

How can I autoplay an html video on Chrome 72, avoiding it to start or not start randomly?

I have a short video that should autoplay in Chrome. I've read plenty about this problem and tried a lot of solutions. Presently my code to play the video is
<video autoplay="true" playsinline muted >
<source src="assets/video/somevideo.webm" type="video/webm" />
</video>
This plays the video, but in an apparently random way. Sometimes the video starts, sometimes not, showing a white screen instead.
The video format is compatible with Chrome ('sometimes' it starts correctly!). The html attributes should be correct, taking into account the limitation of chrome in playing not muted videos.
What could be the problem and how can I play the video, being sure it will always be played?

HTML Video plays double when autoplay is enabled

On my wordpress site, when adding a video via the standard HTML Video tag, and then adding autoplay to it - when i then reload the page it sure autoplays but after a few seconds another instance starts the audio and then the audios are overlapping each other. How can i prevent this? This is my simple code.
<video width="400" controls autoplay>
<source src="/uploads/2018/04/ML_video-converted-with-Clipchamp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Whats going on here?

Latest IOS10 Autoplay Enable

Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.