HTML videos preloading - javascript

We are developing Interactive 2d games, we use the HTML5 videos to show segments with heavy animations,as you may know we are using a lot of resources like images, svgs , since these resources are preloaded once you open the game so they are working great.
but we noticed that when we try to open a video it take a time to play until it is loaded.
Is their a way to preload a 10 videos (for example) once the user opens our website?

There are many libraries that help to prevent those long loadings on videos or audio in html.
Personally my favourite is Media Element.js
http://mediaelementjs.com/
To install, follow the instructions on the website and on the document README.

Related

YouTube stream show subtitles below player

I am have been playing around with a lot of options. popcorn.js, mediaelement.js, jwplayer and I can not find a combination that works. I'm working on a learning website and I need to display the subtitles of the video below the player. I can get it to work all good when the video is hosted on the server and it has a file link. I was using MediaElement.js because all the videos I need are on YouTube so it needs to stream from there.
I have tried a few different combinations and popcorn was originally going to work. When I started playing with it I found their YouTube streaming no longer works. I've followed their examples but its a no-go. Also with popcorn I couldn't get to work with any other subtitle file other than TTML (even though they support the others) and I need one that can have html inside of it.
My latest endeavor got me using the script from here: http://www.storiesinflight.com/js_videosub/#code
This lets me use .srt which is good, but I can't get it to let me stream YouTube with any other JavaScript players so I'm back to where I started.
I have seen a post about going through one of the transcoding websites and using the .mp4 link, but I don't want to rely on a middleman. If that site shuts down then my site will also be screwed. I doubt YouTube is going anywhere anytime soon.
There's a surefire way to do this and that's to create your subtitles in notepad and then upload them to youtube
Then Go to your Account Settings page in Youtube
Select Playback from the left-hand menu
Select/check 'Always show captions'
You should Check Show automatic captions by speech recognition (when available) to enable automatic captions for videos that don't already have captions provided)
Save! and you're done
No javascript required

Javascript Youtube mp4 download to ios

I searched for many solutions to play Youtube videos on iOS.
At the moment i just use a webview to show only the player and then press the play button (only embed the video in the webview).
But I know there is a javascript solution to get an mp4 link for the youtube video.
This is the javascript:
http://userscripts.org/scripts/show/25105
The script searches for the video element and grabs all informations and finally make it possible to download the mp4.
Im not good in javascript, so i dont know if there is an possibility to write that code, that it just works with http://myurl.com/getvideo?id=VIDEOID .
I would try it myself, but i dont know if it is possible to grab all these informations the script uses without the player element.
Maybe you can help me ;)
(im using iOS 5 btw)
My english is not the best, so if u have problems to understand something, just ask.
you can check PSYouTubeExtractor that allows you to retrieve the mp4 version of a YouTube video, it is pretty easy to use.

How to play audio on a PHP/HTML/Javascript based game on facebook?

Is there any way how to play audio for the game slot machine when the reels spinning using javascript.
I tried using , and tags.. The music is playing but on some of the versions there is no sync..
The process is:
- Once the spin button is pressed.. I am showing the animated reels images and embeding the music file with tags.
May be is there any better solution to load music file before and play using .play() function in javascript. I tried this but not working on someversions of firefox and other browsers.
One solution some use is multiple instances of jPlayer (one per channel). You can then preload the sounds and .play() them at will.
jPlayer will try to do HTML5 and use Flash as a backup solution.
http://jplayer.org/

jQuery multimedia embedding out of sync

I am working on a company web page and we have the need to embed some video information for our clients. These videos will be tutorials on how to use our products.
There are 3 issues that I'm having with this web page
1. Resizing the borders of the window will cause the background to flicker.
2. When a video is playing, the user is able to click the drop down box and select a new video which loads, but the audio from the original remains playing.
3. I've also noticed that these videos take some time to load. The videos are around 40 megs in size but the same videos play instantly when loaded directly from our server and not played through a web browser (which attepts to embed the very same videos)
Here are our hardware specifications:
Browser: Internet Explorer 8 (We cannot upgrade to 9 for a while still married to 8 for now.)
Server: Ibm i5 520
The work stations are all x86 machines wired directly into our server via ethernet cable.
I'm new to jQuery and mostly program in C++ so this stateless programming has been a headache.
I've hosted the file below.
http://pastebin.com/bdFqX6xd
Thanks in advance.
This is a great place to start with html video:
http://videojs.com/
Great piece of js to get videos imbedded and also has good instructions.

Is there any way to control EMBED Code Videos?

Is there any way to control YouTube EMBED CODE. For example I am using YouTube embed code in my site. Is there any way to control the video like forward, backward, stop etc. with my own buttons.
Is this possible?
Any help will be appreciated.. Thanks in Advance.
Fero
YouTube has a JavaScript and Flash API that you can use to build your own player or control the player programmatically.
The documentation is here: http://code.google.com/apis/youtube/overview.html
There are several examples in the documentation for controlling your own "chromeless" player. This is probably what you want to use if you want your own buttons.
All of the major browser-embedded video player types have ways to do this, but the method is different for all of them.
YouTube uses a Flash player, which poses a special problem: Flash video players have no ability to handle external JavaScript calls other than what is specifically added by the programmer that built the player. That is, if YouTube didn't build their player with support for external scriptability, you can't script it. This isn't a flag -- on/off -- it's that Flash makes you explicitly publish an external scripting API, and you have to know what the calls look like to make the player do what you want. This is unlike, say, QuickTime, Windows Media Player, or the new HTML 5 <video> tag, all of which have documented basic playback control like you're asking about.
It's probably possible to build your own FLV player (or buy one, like the popular JW Player, which does have a JavaScript API) and point it at the actual video file served by YouTube. I don't know if they try to obscure the video file URL, but once you find out what it is, you're golden.

Categories

Resources