As you can see from the code below instead to src the iframe I decide to build a fake html in the iframe to work better with videos files and in future to add new futures on the video tag;
this technique works fine but I have a problem when I build the app and having autoplay on, it seems that more than 1 time the video will be played (i think 2 times 1 video tag i can pouse and controol the other in the app is just playing). Any idea to fix this problem ?
----------------------------------------------------- video.html
< ion-view title="Video">
< ion-content overflow-scroll="true">
< div class="videoWrapper" ng-init="Full_V_URL(data.video.folder, data.video.smil_de)" style="background-color: rgb(41,41,41);">
< iframe data-ng-init="start()" min-width="100%" height="100%" class="video-screen" src="" frameborder="0" preload="metadata" allowTransparency="true" allowfullscreen></iframe>
< /div>
< /ion-content>
< /ion-view>
----------------------------------------------------- video.js
angular.module('starter')
.controller('VideoCtrl', function($scope, $ionicModal, $timeout, localStorageService, $sce, $ionicSideMenuDelegate) {
$scope.data = {};
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
$scope.data.video = localStorageService.get('viewVideo');
$scope.data.video.listEp = _.range($scope.data.video.ep);
console.log($scope.data, _.range($scope.data.video.ep));
$scope.Base_V_URL = "http://something";
$scope.v_url = "";
$scope.Full_V_URL = function(a, b) {
$scope.v_url = $scope.Base_V_URL + a + "/smil:" + b + "/playlist.m3u8";
//alert ($scope.mom )
return $scope.v_url;
};
$scope.start = function() {
angular.element(document.getElementsByTagName('iframe')[0].document.body.innerHTML =
'< html>\
< body style="background-color: rgb(41,41,41); margin:8px; display:block;">\
< video style="margin: auto; position: absolute; top: 0px; left:0px; bottom: 0px; right: 0px; max-width: 100%; max-height: 100%;" \
autoplay controls>\
<source src="' + $scope.v_url + '" type="application/x-mpegURL">\
< /video>\
< /body></html>');
};
});