I am using the plyr.io in the angularJS using the custome directive.
So it was created the iframe element and inside that create a #document
<iframe src="https://player.vimeo.com/video/274993951?loop=false&autoplay=false&muted=false&gesture=media&playsinline=true&byline=false&portrait=false&title=false&speed=true&transparent=false&customControls=true" allowfullscreen="" allow="autoplay; fullscreen; picture-in-picture; encrypted-media; accelerometer; gyroscope" title="Player for Welcome to Wheelhouse College - Managers" id="myIframe" data-ready="true" tabindex="-1">
#document
<html>......html content......</html>
</iframe>
how can I acess the html data inside the #document?
Here is the custome directive
(function (base) {
'use strict';
base.directive('plyrPlayer', ['logService', '$timeout', function (logService, $timeout) {
return {
link: function ($scope, $element, $attr) {
var player;
var element = $element[0];
var secondsWatched = $attr.secondsWatched;
var showMaximized = $attr.showMaximized === "on";
var provider = $attr.plyrProvider;
function createPlayer(vimeoId,videotype) {
element.setAttribute('data-plyr-provider', videotype);
element.setAttribute('data-plyr-embed-id', vimeoId);
player = new Plyr(element, { "id": vimeoId, "autoplay": false, "hideControls": false, "clickToPlay": false });
player.on("play", function (data) {
var loadingId = $element.data("loadingId");
if (angular.isNumber(loadingId)) {
logService.debug("evimeoPlayer: video loading failed assuming vimeoId: %o", loadingId);
$element.removeData("loadingId");
$element.data("vimeoId", loadingId);
} else
logService.debug("evimeoPlayer: play video vimeoId: %o", $element.data("vimeoId"));
function maximizePlayer(el) {
var style = el.style;
style.position = "fixed";
style.zIndex = "100";
style.top = "0";
style.bottom = "0";
style.left = "0";
style.right = "0";
var iframe = element.firstChild;
style = iframe.style;
// size to 100% of the viewport
style.width = "100vw";
style.height = "100vh";
}
if (angular.isFunction($scope.$parent.onPlayStart))
$scope.$parent.onPlayStart();
if (showMaximized)
maximizePlayer(element);
});
player.on("pause", function (data) {
const instance = data.detail.plyr;
var mydata = {
duration: instance.media.duration,
percent: Math.floor(instance.media.currentTime / instance.media.duration * 100),
seconds: instance.media.currentTime,
vimeoId: $element.data("vimeoId")
};
$scope.$parent[secondsWatched] = mydata;
if (angular.isFunction($scope.$parent.onPlayStop)) {
// $scope.$parent.onPlayStop(data.duration === data.seconds);
$scope.$parent.onPlayStop(false);
}
});
player.on("timeupdate", function (data) {
$timeout(function () {
const instance = data.detail.plyr;
var mydata = {
duration: instance.media.duration,
percent: Math.floor(instance.media.currentTime / instance.media.duration * 100),
seconds: instance.media.currentTime,
vimeoId: $element.data("vimeoId")
};
$scope.$parent[secondsWatched] = mydata;
$scope.$parent.$digest();
$scope[secondsWatched] = mydata;
if (angular.isFunction($scope.$parent.updateSecondsWatched))
$scope.$parent.updateSecondsWatched(mydata);
}, 10);
});
player.on("ended", function (data) {
function minimizePlayer(el) {
var style = el.style;
// return the player to the original size
style.position = "";
style.zIndex = "";
style.top = "";
style.bottom = "";
style.left = "";
style.right = "";
var iframe = el.firstChild;
style = iframe.style;
style.width = "";
style.height = "";
}
logService.debug("evimeoPlayer: video ended vimeoId: %o", $element.data("vimeoId"));
$scope.$parent.onPlayStop(true);
if (showMaximized)
minimizePlayer(element);
});
player.on("loadstart", function (data) {
$element.removeData("loadingId");
$element.data("vimeoId", data.id);
logService.debug("evimeoPlayer: video loaded vimeoId: %o", data.id);
});
player.on("ready", function (data) {
const instance = data.detail.plyr;
var progress = 0;
if (angular.isFunction($scope.$parent.getCurrentProgress))
progress = $scope.$parent.getCurrentProgress();
if (progress <= 0) {
return;
}
data.detail.plyr.loop = false;
//player.embed.setCurrentTime(progress);
player.pause();
});
return player;
}
;
$scope.$watchGroup([$attr.plyrEmbedId, $attr.plyrProvider], function (value1,value2,scope) {
var videotype=scope.$$watchers[0].last;
if (videotype == "vimeo") {
var vimeoId = parseInt(scope.$$watchers[1].last);
if (!angular.isNumber(vimeoId)) {
logService.debug("evimeoPlayer: vimeoId is not available")
return;
}
} else {
var vimeoId = scope.$$watchers[1].last;
}
if (!player) {
player = createPlayer(vimeoId,videotype);
logService.debug("evimeoPlayer: created player vimeoId: %o", vimeoId);
$element.data("vimeoId", vimeoId);
} else {
player.pause();
//.then(function () {
// loading the video often doesn't complete to the point that the loaded event is fired
// but the video is loaded. Loading the thumbnail image fails. Capture the loadingId and
// apply that in playing if it exists.
$element.data("loadingId", vimeoId);
logService.debug("evimeoPlayer: video loading vimeoId: %o", vimeoId);
player.captions["active"]= null
player.captions["currentTrack"] =-1
player.source = {
type: 'video',
sources: [
{
src: vimeoId,
provider: videotype,
},
],
};
$element.data("vimeoId", vimeoId);
//player.loadVideo(vimeoId).catch(function () {
// $element.data("vimeoId", vimeoId);
//});
//})
}
}, true);
},
restrict: 'EA',
scope: false
}
}
]
);
}(lmsApp));
I didn't get the cross origin error as well in the browser and I have tried to access the content document using the following code var iframeDocument = iframe.contentDocument; but it will getting the null.
edited code is
var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument;