Playing YouTube using Titanium.Media.VideoPlayer
Is it possible to play a YouTube video using Titanium.Media.VideoPlayer? Currently I am using Titanium.UI.WebView to play the video.
The reason why I want to use Titanium.Media.VideoPlayer is because:
1) I don't want user to have to click on the play to start the video. I want the video to start automatically when the window gets focus.
2) Once the video is complete or the user clicks the "Done" button, I want the view and window to be closed without user having to click the back button.
12 Answers
-
I finally did it!
Everything you need is here
and it gives thisfunction h264videosWithYoutubeURL(_youtubeId, _callbackOk, _callbackError) { var youtubeInfoUrl = 'http://www.youtube.com/get_video_info?video_id=' + _youtubeId; var request = Titanium.Network.createHTTPClient({ timeout : 10000 /* in milliseconds */}); request.open("GET", youtubeInfoUrl); request.onerror = function(_event){ if (_callbackError) _callbackError({status: this.status, error:_event.error}); }; request.onload = function(_event){ var qualities = {}; var response = this.responseText; var args = getURLArgs(response); if (!args.hasOwnProperty('url_encoded_fmt_stream_map')) { if (_callbackError) _callbackError(); } else { var fmtstring = args['url_encoded_fmt_stream_map']; var fmtarray = fmtstring.split(','); for(var i=0,j=fmtarray.length; i<j; i++){ var args2 = getURLArgs(fmtarray[i]); var type = decodeURIComponent(args2['type']); if (type.indexOf('mp4') >= 0) { var url = decodeURIComponent(args2['url']); var quality = decodeURIComponent(args2['quality']); qualities[quality] = url; } } if (_callbackOk) _callbackOk(qualities); } } request.send(); }
-
See https://gist.github.com/3151702 for my quite short workaround. Native player by extracting the mp4.
-
@Jonathan: My Gist still works; we experienced the same outage, but my workaround wraps around the interface, the mobile Youtube App uses. https://gist.github.com/3151702 — we're already deploying this code as workaround in our apps. (successfully). Youtube implemented several security enhancements on it's servers; so for now, I think, this workaround is the only way to get it working. Have a nice day!
-
Here is a spin-off of Kenan's solution that works on both iOS and Android:
var lib = Alloy.Globals; exports.play = function(id) { getVideo(id); }; function getVideo(id) { var client = Ti.Network.createHTTPClient(); client.onload = function () { var json = decodeURIComponent(decodeURIComponent(decodeURIComponent(decodeURIComponent(this.responseText.substring(4, this.responseText.length))))); var response = JSON.parse(json); var video = response.content.video; var streamUrl = video['fmt_stream_map'] ? video['fmt_stream_map'][0].url : video.stream_url; Ti.API.info("stream url: " + streamUrl); playVideo(streamUrl); }; client.setRequestHeader('Referer', 'http://www.youtube.com/watch?v=' + id); client.setRequestHeader('User-Agent', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML, like Gecko) Version/6.0.1 Safari/536.26.14'); client.open('GET', 'http://m.youtube.com/watch?ajax=1&feature=related&layout=mobile&tsp=1&&v=' + id); client.send(); } function playVideo(url) { var win = Ti.UI.createWindow({ title: 'Video Player', backButtonTitle: 'Videos', barColor: '#000', backgroundColor: '#000' }); videoPlayer = Ti.Media.createVideoPlayer({ backgroundColor: '#000', fullscreen: true, url: url, autoplay: true, scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT, mediaControlMode: Ti.Media.VIDEO_CONTROL_NONE }); /*videoPlayer.addEventListener('complete', function(e) { if (e.reason === 0) { Ti.API.info('complete exit'); win.close(); }; });*/ videoPlayer.addEventListener('fullscreen', function (e) { if (!e.entering) { Ti.API.info('fullscreen exit'); win.close(); } }); if(!lib.constants.IS_ANDROID) { win.add(videoPlayer); } win.open(); }
-
As long as you can get the MP4 version of the file I don't think it'll be an issue. I've been adding Revsion3 videos to my app (both for Android and iPhone) and it's now working fine. It took a bit of trial and error to get the code to work across both platforms.
On Android it will always fire up a new window.. i.e. the video isn't embedded like you can do on the iPhone.
-
Unfortunately I don't have control over the media type. It may not always be an MP4.
-
i have searched all the net, nothing happens, i really need to learn playing youtube videos, is this really so hard?nobody can't do that?
-
: (
@ since 2 weeks with Martin Guillon script -> HTTP-Fehler 403 (Forbidden): Der Server hat die Verarbeitung der Anforderung verweigert.help please.
-
@ Martin Guillon
I am newbie in Titanium Can You please post the whole code along with design to get the complete functionality i.e. running video from Youtube .. -
This code works on Android, but the format is .3GP (low quality) :
function convert(a){ //where "a" is video ID; var xhr = Ti.Network.createHTTPClient(); xhr.setRequestHeader("Referer", "http://www.youtube.com/watch?v=" + a); xhr.setRequestHeader("User-Agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML, like Gecko) Version/6.0.1 Safari/536.26.14"); xhr.open("GET", "http://m.youtube.com/watch?ajax=1&feature=related&layout=mobile&tsp=1&&v=" + a); xhr.onload = function () { x = decodeURIComponent(decodeURIComponent(decodeURIComponent(decodeURIComponent(this.responseText.substring(4, this.responseText.length))))); y = OS_IOS ? JSON.parse(x).content.video["fmt_stream_map"][0].url : JSON.parse(x).content.video["stream_url"]; movie.url = y; win.add(movie); }; xhr.send(); }
-
hi, if creating a webview? is not good?
-
i figured out how to play youtube videos with a regular video player ( Titanium.Media.VideoPlayer, or native as MPMoviePlayerController) - msg me at sircambridge at gmail