I'm trying to get a video background on one of my web pages.
I've tried converting my video to several formats(ogg,mp4..etc) and testing a few plugins, however I cant seem to get video backgrounds to play on mobiles and some older browsers (firefox, IE7).
Does anyone know what the best way to do this would be to date?
Related
I've spent a few days digging almost any post possible on this subject.
So far I haven't been able to find a proper solution.
Basically I would like to create an HTML5 audio player that plays music (one file at a time) on mobile browsers (iOS/Android) that will play the music instantly when the user clicks "Play" (just like youtube works on mobile browsers) and that the browser won't try to load/cache the whole file first before it plays it.
I tried Audio Sprites and that didn't work well (it is mostly related to web games).
I'm currently running out of guesses, but I've implemented a fullscreen video header on some sites of my webpage using WebM and a JPG replacement image as fallback shall the original MP4 video not be able to load
The header loads perfectly fine on 2 Macs as well as several smaller devices (tablets and smartphones across operating systems) however, some people that I've asked to test the website reported that the video does not load across browsers, and neither does the image fallback.
I've examined the code already a couple of times. Here's an example:
http://crispin-m.de/bentley.html
does it load in your browser? Where is the mistake that I've made?
Regards
I'm trying to make new web-site that background has a video.
I found a JS library: tubular
This plugin working as expected in my desktop browser. (Checked on : Chrome,Safari,Firefox)
But, This NOT working in mobile browsers.
I tried in (Nexus 5, HTC M8).
Both devices are not responding for video background.
Anyone there who knows the solution for this issue or some alternative library that I can use?
I suspect this is a problem with the video background not autoplaying on a mobile browser. This is by design though, it is a mechanism that prevents autoplaying videos from using up bandwidth unnecessarily.
I have seen on some websites when they are viewed on iPhone 6 the videos play inline rather than going to full screen in mobile safari, how is this achieved?
HTML5 <video> element is most likely how this is achieved. Cross-compatibility is something to think about, though, because older browsers won't support this object.
Background:
The videos in my play list are all 1/2 second to 4 seconds long.
The playlist is randomly generated on page load.
Strategies
HLS Streaming - I've implemented this strategy (m3u8 playlists) and it works, but there were several issues with it.
Preloading all the vidoes - I am lacking experience and in-depth knowledge of HTML5 video. I have implemented a demo that preloads all the videos in separate <video> tags and then switches them in and out as needed. This works in Chrome, has frequent pauses in Safari, and violently crashes OSX in Firefox.
Is there a better way to do this?
Maybe a better strategy to preloading the videos?
Thank you so much.