Problem video tag ionic and Dom

@sicignano wrote:

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>');
  };
});

Posts: 3

Participants: 2

Read full topic