Play dual audio MKV/AVI video with HTML5 - javascript

From what I searched for, Chrome has the codecs to play MKV videos.
But, so far, I haven't found anything that allows, using Javascript / HTML5, to select the audio tracks available in the MKV and AVI files.
Can anyone give me a light on how to do this?
My idea was to create a web player to play this type of file, with the possibility to select the audio track and display subtitles.

The audioTracks property allows you to do this. However, as stated in the documentation here https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks
From version 37: this feature is behind the enable-experimental-web-platform-features >preferences (needs to be set to enabled). To change preferences in Chrome, visit >chrome://flags.
I've tried this and it works at least for video elements that have an mkv file as a source.

Related

Flash fallback for jplayer won't work in chrome because "Invisible [Flash] content is always blocked."

So I have to use the Flash fallback for Jplayer when the user is using Google Chrome because of the way our audio streaming server is set up (HTML5 just doesn't play nicely with our Streaming Audio Icecast server for some reason, live streams are fine but static mp3s are not). All other browsers are fine!
However, it keeps blocking the player even if the site is selected to always play the flash plugin, and now it's printing this error in the console: "Same-origin plugin content from http://kansaspublicradio.org/widgets/audio-popup/jplayer/Jplayer.swf must have a visible size larger than 6 x 6 pixels, or it will be blocked. Invisible content is always blocked."
What's the best/easiest way to make the Flash player not be invisible?
Jplayer uses HTML elements for the controls. It's not like your typical Flash game or animation or anything, the Flash part is just used to play audio (when HTML5 isn't being uses).
Thanks for any help! I'm also aware that Flash is going away in a few years, hopefully we have a more ideal solution figured out by then.
Open jquery.jplayer.js or jquery.jplayer.min.js and find setAttribute("width". Here you can adjust the width and height of the loaded player. Setting this to something above 6x6 should fix your issue.
Unfortunately the official jPlayer project is no longer maintained and pull requests are ignored, so you'll have to do this manually.

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.

flash-free continuous audio player - is this possible?

edit: condensed question:
How can I create a flash-free continuous music player (one that is uninterrupted as the user navigates the site)
So I want to set up a website with an audio player that behaves in much the same way as that of many flash players on sites such as hypem.com and pitchfork.com, however I want to avoid Flash altogether if possible so I can retain compatibility with Apple mobile devices.
(edit: mind you i am not creating something mobile-specific! just a webpage with an audio-player feature that can be used on an Ipad/Iphone/Ipodtouch)
I've been looking everywhere for info and so far some people have thrown around that Javascript might provide a solution, but all the players I've found use Javascript AND Flash and do not address the continuous play issue.
Take a look at the html5 <audio> tag.
http://www.catswhocode.com/blog/mastering-the-html5-audio-property
Try and keep your SO questions specific. Ask your site layout question in another question.
https://stackoverflow.com/faq
Here is some code that should get you on the right track
First the html audio element supported by all the browsers but in the IE family only IE9
<audio id="test" controls="controls" type="audio/ogg">Your browser doesn't support the audio tag.</audio>
Then the javascript
window.onload=function(){
var pre='';
var arr=['songTitle1','songTitle2','songTitle3'];
var ind=0;
var ele=document.getElementById('test');
ele.src=(ind++)+'.ogg';
ele.play();
//when the song ends start a new one
ele.onended=function(){
ele.src=(ind++)+'.ogg';
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ind=ind==arr.length?0:ind;
ele.play();
}
}
This just takes an array of song titles and plays through them assuming that you have the ogg files in the same directory as the html file. Right now I think ogg is the only format that you can play on all browsers.

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