Video autoplay in HTML, JS, video.js - javascript

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.

Related

Cross browser video autoplay loop

I have a copy of a mp4 video which I want to show on my website and I want to know how is it possible with javascript to autoplay and loop for ever the video.
I want to make it compatible with all browsers.
I want to load the video on load of the page with js
Thank you.
You’ll need to mute the video (adding the muted attribute on the <video> tag) as videos with sound don’t autoplay in all browsers. Then also add the attributes autoplay and playsinline. Also you can use the videoEnd event and call play() to ensure it loops.
<video autoplay loop>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
</video>
You mean this?

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.

could we use youtube video player in our website with our own video(video does not upload to youtube server)?

I am looking for the best video player to use on my offline website I tried with some video players but it does not work well. sometimes it is stuck when user try to stream it. If have some video players as youtube player and we can use it offline is the best practice for my requirement. if someone know this please help me. thanks in advance.
Unfortunately no. Videos which are hosted by YouTube are only available to be on the YouTube player.
Like other users have said, you may be interested in HTML5 video. All major browsers will support it.
There are also 3rd party libraries which offer HTML5 video. http://videojs.com/ is a popular one.
you can use HTML5 video tag.
https://developer.mozilla.org/en/docs/Web/HTML/Element/video
e.g:
<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>
You maybe can use HTML5 to Solve that, i hope help with this Link on HTML5 Video Player, if not solve your problem or if you have some questions ask! :)
<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>

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?

HTML5 video element not working on Android and iPhone

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

Categories