We can add YouTube videos in our simple ionic app by creating simple directive in angularjs and pass the youtube video id.
I have refer multiple sites and solutions and after that create one directive and use it in my app to embed youtube video in ionic app.
1.Create the project
ionic start Test blank
cd Test
ionic platform add android
2.Implementation
Here is how most people add a YouTube player to their hybrid app :
<iframe src="https://www.youtube.com/embed/KBKXu3Kg4yg?rel=0" frameborder="0" allowfullscreen>
</iframe>
This is simple way but here we ar not handle some events with youtube video and it's may be complicated for us.For that we creating directive and use it our view.
First head out to google development docs and look up the programmatic way of embedding YouTube using javascript.
Following code shows the code in our directives.js file
angular.module('starter.dirctives', [])
.directive('youtube', function($window) {
return {
restrict: "E",
scope: {
height: "@",
width: "@",
videoid: "@"
},
template: '<div></div>',
link: function(scope, element) {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
$window.onYouTubeIframeAPIReady = function() {
player = new YT.Player(element.children()[0], {
playerVars: {
autoplay: 0,
html5: 1,
theme: "light",
modesbranding: 0,
color: "white",
iv_load_policy: 3,
showinfo: 1,
controls: 1
},
height: scope.height,
width: scope.width,
videoId: scope.videoid,
});
}
scope.$watch('videoid', function(newValue, oldValue) {
if (newValue == oldValue) {
return;
}
player.cueVideoById(scope.videoid);
});
scope.$watch('height + width', function(newValue, oldValue) {
if (newValue == oldValue) {
return;
}
player.setSize(scope.width, scope.height);
});
}
};
});
Following code shows the code in our controllers.js file
angular.module('starter.controllers', [])
.controller('youtubevideo', function($scope, $sce) {
$scope.navTitle = 'Video Gallery';
$scope.yt = {
videoid: "M7lc1UVf-VE",
};
});
Following code shows the code in our app.js file
angular.module('starter', ['ionic', 'starter.controllers', 'starter.dirctives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function( $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
});
Following code shows the code in our index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ng-cordova.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/dirctives.js"></script>
</head>
<body ng-app="starter">
<ion-view view-title="Video Gallery">
<ion-content>
<div class="list card">
<div class="item item-divider">
<i class="ion-videocamera"></i>
Video
</div>
<div class="padding">
<youtube width="100%" height="150" videoid="{{yt.videoid}}"></youtube>
</div>
</div>
</ion-content>
</ion-view>
</body>
</html>
3.Run it
ionic build android
NOTE:
At the time running application i have got one error like URL blocked by whitelist on Android and it solved by adding plugin.
With the updated version of cordova-android, you now need to include the cordova-whitelist-plugin.
cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git
Hi santosh,
ReplyDeleteI tried the solution mentioned in this blog and http://stackoverflow.com/questions/37516486/how-to-play-restricted-playback-youtube-videos-on-android-using-ionic-framework. Both are giving same exception that playback is restricted in certain sites on my android device. Is there any solution for that.
ReplyDeleteThanks for sharing, I will bookmark and be back again
hire ionic developers