A small library to get the URL of the desired YouTube video ID to use it natively in Ti.Media.VideoPlayer.
It returns an URL object with the following properties:
{
small: 'typically 180p',
medium: 'typically 360p',
high: 'typically 720p',
best: 'best quality available either small, medium or high'
}The data received from YouTube is a big pile of mess, different type of video (live video, normal video, member-only video, unlisted video, .etc) can have a different response schema, so at the moment finding the right path is difficult.
ti.youtube may brake YouTube’s Terms of Service. The only official way of playing a YouTube video inside an app is with a WebView and the iframe player API.
It is up to you to give proper credit to YouTube, their services, and to the owner's video sources.
Some YouTube videos are restricted by their owners to play only on YouTube or embedded on websites.
The library will show an alert that the given video cannot be played natively.
Run the following command in your lib directory in Alloy, Resources directory for classic or the project root for Titanium Webpack projects.
npm i ti.youtube
If you don't use npm, you can download the latest version and place it in your lib folder (or Resources for classic project).
index.js
const tiYoutube = require('ti.youtube');
let videoID = tiYoutube.getVideoIdFromUrl('https://youtu.be/M5QY2_8704o');
if (videoID) {
tiYoutube.getUrlByVideoId(videoID, response => {
// Available Video Qualities:
// small ( typically 180p )
// medium ( typically 360p )
// high ( typically 720p )
// best ( best quality available from small, medium or high sizes )
$.videoPlayer.url = response.url.best;
}, e => {
// optional callback in case of an error
// can return e.error statuses ["no_valid_urls", "video_not_allowed", "http_error"]
});
}
$.window.open();index.js
const tiYoutube = require('ti.youtube');
tiYoutube.init('https://youtu.be/M5QY2_8704o', (response) => {
$.videoPlayer.url = response.url.best;
});
$.window.open();response {
"url": {
// Any available size
"small": "--DIRECT-VIDEO-LINK--",
"medium": "--DIRECT-VIDEO-LINK--",
"high": "--DIRECT-VIDEO-LINK--",
// Best quality available from small, medium or high sizes
"best": "--DIRECT-VIDEO-LINK--"
},
"videoId": "M5QY2_8704o",
"keywords": [
"--ARRAY-OF-KEYWORDS--"
],
"channelId": "UCwVQIkAtyZzQSA-OY1rsGig",
"viewCount": "3469185",
"isLiveContent": false,
"averageRating": 4.8945122,
"title": "Chillstep Music for Programming / Cyber / Coding",
"author": "Music Lab",
"thumbnail": {
"xs": {
"url": "--URL-TO-IMAGE--",
"width": 120,
"height": 90
},
"sm": {
"url": "--URL-TO-IMAGE--",
"width": 320,
"height": 180
},
"md": {
"url": "--URL-TO-IMAGE--",
"width": 480,
"height": 360
},
"lg": {
"url": "--URL-TO-IMAGE--",
"width": 640,
"height": 480
},
"xl": {
"url": "--URL-TO-IMAGE--",
"width": 686,
"height": 386
},
"best": {
"url": "--BEST-AVAILABLE-RESOLUTION--",
"width": 686,
"height": 386
}
},
"shortDescription": "--VIDEO-DESCRIPTION--"
}index.xml
<Alloy>
<Window id="window">
<VideoPlayer id="videoPlayer" ns="Ti.Media" />
</Window>
</Alloy>app.tss
"#window": {
backgroundColor: '#ffffff'
}
'#videoPlayer' : {
autoplay: true,
width: Ti.UI.FILL,
height: Ti.UI.FILL,
showsControls: true,
scalingMode : Ti.Media.VIDEO_SCALING_ASPECT_FIT
}
'#videoPlayer[platform=ios]' : {
allowsAirPlay: true,
mediaTypes: [ Ti.Media.VIDEO_MEDIA_TYPE_VIDEO ]
}
'#videoPlayer[platform=android]' : {
keepScreenOn: true
}To get the video ID from any of the supported URL formats.
const tiYoutube = require('ti.youtube');
tiYoutube.getVideoIdFromUrl('https://youtu.be/M5QY2_8704o');
// output: M5QY2_8704o
// Supported URL Formats
// 'youtu.be/M5QY2_8704o',
// 'https://youtu.be/M5QY2_8704o',
// 'https://youtube.com/M5QY2_8704o',
// 'youtube.com/watch?v=M5QY2_8704o',
// 'https://youtu.be/?v=M5QY2_8704o',
// 'https://youtu.be/watch?v=M5QY2_8704o',
// 'https://youtube.com/watch?v=M5QY2_8704o',
// 'https://www.youtu.be/watch?v=M5QY2_8704o',
// 'https://www.youtube.com/watch?v=M5QY2_8704o'It returns the Video ID, or false if it cannot find any.
When you call init or getUrlByVideoId the data returned it's also store in a local variable inside the module, you can retreive it at any time by calling the getVideoDetails() helper function.
ti.youtube uses a publicly available INNERTUBE_API_KEY. But if you want to, you can provide your own Google API Key with YouTube Data API v3 enabled.
You can place it as a property in your project’s tiapp.xml file:
<property name="googleApiKey" type="string">PLACE-YOUR-GOOGLE-API-KEY</property>Useful if you don’t want to set your Google API key in your tiapp.xml file, or if you get it from a database call, or if for some reason you need to change it at runtime.
const tiYoutube = require('ti.youtube');
tiYoutube.setApiKey('YOUR-NEW-OR-UPDATED-GOOGLE-API-KEY');To view your Google API Key
const tiYoutube = require('ti.youtube');
console.log(tiYoutube.getApiKey());
// output: YOUR-GOOGLE-API-KEYIn order to find and resolve media streams, you need to first get video metadata. There are a few ways to do it, but the most reliable one is by querying an AJAX endpoint used internally by YouTube’s iframe embed API. The format is as follows: https://www.youtube.com/get_video_info?video_id={videoId}.
The request can take a lot of different parameters, but at a minimum it needs a video ID — the value in the URL that comes after /watch?v=, for example dQw4w9WgXcQ.
The response contains URL-encoded metadata, which has to be decoded first before it’s usable. After that, you can map the parameter names to values in a dictionary for easier access. Some parameter values are nested objects themselves, so they can in turn be mapped to nested dictionaries.
Source Reverse-Engineering YouTube by Alexey Golub
Apache Version 2.0
See License