Making an HTML5 Audio Player for mobile browsers - javascript

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).

Related

Best way to sync video playback on multiple devices using NodeJS and websockets

I am trying to sync video playback across a set number of devices. Each device will play one section of the video, creating one large video playback made up of individual devices. As shown here:
Currently, I have this working fairly well using nodeJS with socket.io. My solution was to set the top left device as the master client device. From the master, I am sending the currentTime of the video to the server where it is broadcasted to the rest of the devices. On the remaining three devices, I am using the master video currentTime to slow or speed up it's video to match the master device video. This works, however, you can sometimes notice that the master video is slightly ahead of the other videos. With this solution, it takes a lot of fine-tuning to get it right.
I am wondering if there's a better way to do this. Would it be more efficient to stream each video from the server to the corresponding device? The app will eventually work with any set grid dimension so streaming-only 4 videos as shown here will not always be the case.

Video don't open on browser of cell phone

(Using WordPress 4.7.3)
I have a video on my header background and it runs normally in the browser on desktop but when I open the browser on a cell phone, the video disappears. I checked the media queries in order to know if it is the problem, but apparently not.
Site URL: http://ratts.herokuapp.com/
Any idea what it is?
If you are talking about the video on the background, it won't work.
The only way to autoplay videos on mobile devices is to ditch the html video tag.
If you don't need audio:
Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.
Here's a similar question:
HTML5 video background on iPad/iphone

Dynamic HTML5 video playlist that has no pause between videos?

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.

smooth video transition HTML5

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.

Is there a good wrapper for using Media Player in IE

I need to add media playback ability to a web application. It has to play audio and video, and the player has to be MS Media Player (shouldn't use any plugin non existent on a standard windows machine). I know I can add it directly as an ActiveX to IE, and control it with JavaScript. I wonder if there is some popular and good wrapper that will save me some of the work.
UPADTE: Having a way to easily embed the player on the page is cool. But I would like the interaction with the player to be managed too. Things I would like it to support:
Play
Pause
Stop
Load different media clip
Change volume
resize
Also I would like to be able to replace the default controls (visible in the Windows Media Player) with my own skinned controls.
Hey, this one should help:
http://malsup.com/jquery/media/
Flowplayer is also a good one: http://flowplayer.org/

Categories