HTML5 video element not working on Android and iPhone - javascript

I have used 5 video in htmt5 video element as a slider. It is not working on Android and iPhone device. Just only show a single image. This is my site http://devpgc.buysidedesign.com/
I have used following code
<video id="video" autoplay loop muted>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.mp4" type="video/mp4"/>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.webm" type="video/webm"/>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.ogg" type="video/ogg"/>
</video>
I have also try to follow this link HTML5 <video> element on Android but no luck. Please tell me the solution.


Try this:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Source

Related

Video autoplay in HTML, JS, video.js

I have a problem with video autoplay with sound in HTML. I am using video.js also.
The problem is that I can't make the video to autoplay while sound is not muted on the video.
But I have the example, which I will link at the end, where video autoplay works with sound.
So I have this code in html:
<video id="video" preload="auto" playsinline controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
and this code in JS:
var videoPlayer = videojs('video');
videoPlayer.ready(function() {
var promise = videoPlayer.play();
});
And this code wont make the video to play automatically.
Here is an example where autoplay with sound is working. I need something like this, but cant figure out how they implemented it.
Would appreciate any advice and help!

You can autoplay a video only if it is muted.You are trying to achieve something which is not possible as per chrome autoplay policy.
Read the autoplay policy changes.

How to add preview thumbnails to html5 video seekbar

So as the question states, I would like to add thumbnails to my html5 video seekbar. I would like to do this using a webvtt file.
My html5 video code...
<video controls>
<source src="video.mp4" type="video/mp4" >
<track src="video.vtt" kind="metadata" default>
</video>
Could anyone show me an example of the javascript needed to make this work please?
An example of what I'm wanting to do is already done on the JWPlayer here.

HTML 5 Video iOS

It may seem a dumb question but I cannot figure out a solution, I am embedding a local video using the standard html5 video syntax, the problem is that on safari / ios the video won't play and a quicktime striketrhough icon appears instead.
The same error appears on w3c page if I try to playback a video using iphone / ios (testing on xcode):
https://www.w3schools.com/html/html5_video.asp
How can I fix this problem?
This is the code I am using:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Thanks.

Autoplay video on mobile device

I've seen posts complaining that you cannot autoplay a video on mobile device.
But, this CAN be done. I've visited youtube website on android and iOS and video does indeed start to play without any user interaction. How can I mimic this behaviour?
EDIT: if you visit direct link, it does not work. If you first visit youtube.com and than click on some video, it works. No idea why.

<video id="mobilevideo" name="Mobile video" onLoad="play()" onClick="play()" preload="auto" autoplay preload muted playsinline webkit-playsinline>
<source src="file.webm" type="video/webm">
<source src="file.ogg" type="video/ogg">
<source src="file.mp4" type="video/mp4">
Your browser does not support this file type.
</video>
<!--Javascript autoplay video -->
<script>
document.getElementById('mobilevideo').play();
</script>

You can use autoplay in video tag. like this:
<video width="320" height="240" controls autoplay>
For more information, you can learn from here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay
For mobile, you should not do auto play because it will cost user's bandwidth(money). See this post for more detail:
Can you autoplay HTML5 videos on the iPad?

Have HTML5 video reset itself to beginning after it plays through?

Is there a way to have a HTML5 video reset itself to the beginning after it plays through? Will be displaying the video through Safari on an iPad primarily.

Just add the loop attribute in your <video> tag.
<video loop>
<source src="something.mp4" type="video/mp4">
</video>

Categories