I doing a website where I need to put a background video on a div. Everything work fine except the autoplay on Chrome.
I have both autoplay and muted on my tag and I've tried too with a javascript that play the video but neither of theses worked for me.
video id="myVideo" autoplay muted loop
and
document.getElementById('myVideo').play()
On safari it works fine, but when I try on Chrome, the video never autoplay. If I run the script on the Chrome console, it starts playing so I don't know what to do...
I know this is old, but I just had issues and wanted to post. It looks like the file size needs to be around 2MB max for the autoplay function to work for a background video. I just spent all morning with the correct code, testing in chrome, but it wouldn't play until I got the file size to 2.1MB, so I would say max is probably around 2.5MB.
Related
I have a video on my website that I need to keep "locked" (visitors shouldn't be able to play/pause/forward).
I noticed that if I flip my phone the video goes full-screen and the OS takes control of it (it's no longer played by the inline html player, but instead is played by the OS player).
Any way to prevent that?
<video playsinline webkit-playsinline>
...
</video>
PS: I tried the playsinline attribute, but it didn't seem to work. At least not on the devices I tested.
First: there are topics with the similar title. I browsed them but dint find a satisfactory answer.
I am testing autoloading of html5 video in android and ipad.(Auto load only works in few browsers: Firefox, Opera and Safari).
The video loads instantaneously if it is on the device that is playing. But if the video is on a server it takes very long time to load(It took nearly 5 mins for the video to start).
I dont think the problem is with bandwidth. For testing purpose I have hosted the files on google drive. (accessing Google drive should be pretty fast and the size of the video files are less than 2MB).
Can you suggest how to speed up video loading?
Here is my video element:
<video id="video1" width="430" height="430" controls preload="auto" >
<source src="https://drive.google.com/uc?export=download&id=0B0eCCOckMJskRDl2enU4N1JLSGs" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="https://drive.google.com/uc?export=download&id=0B0eCCOckMJskbURTTjJVaG42V0U" type='video/webm;codecs="vp8, vorbis"'/>
</video>
Thanks.
The reason it does this is because sometimes the video encoder (whatever programme was used) places the video index at the end of the video file rather than at the beginning. This interferes with progressive download as the browser doesn’t know anything about the file until it has downloaded it and read that index.
Run this program below on it, which will simply re-encode the file, placing the index at the beginning.
http://renaun.com/blog/code/qtindexswapper/
Let me know if this helps.
Install qt-faststart, then run the command:
qt-faststart inputfile.mp4 outputfile.mp4
I am creating a video watching system with the HTML5 video tag. I have one problem and I don't know if the problem is because of my code or of Google Chrome.
Everything works fine until I try to drag the timeline bar or volume bar. Can anybody please help me? The problem is that the moment I click and unclick it does not stop dragging the bar around. So when I drag and leave it, it doesn't stop dragging. I have tried everything like clicking around but the only thing that worked was when I reload the page.
My code:
<video controls width="640" height="264" poster=""><source src="uploads/video1.mp4" />To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</video>
I Don't think your code is having any issue, It might be because of the type of mp4 file you are using.
Please use following piece of your code working perfectly fine (I have used different mp4 source file)
<video controls width="320" height="264" poster="">
<source src="http://www.w3schools.com/html/movie.mp4" />
To view this video please enable JavaScript, and consider upgrading to a web browser
that supports HTML5 video
</video>
Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.
The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.
this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).