Video.js: Flash Tech: this.el_.vjs_getProperty is not a function
I test the version 5.0rc2
I initialize a player as well as version 4.10.
this.videoParams = { poster: 'http://video-js.zencoder.com/oceans-clip.png', link: 'http://video-js.zencoder.com/oceans-clip.mp4', type: 'video/mp4', tech: [ 'flash' ] };
this.player = new videojs( this.area.$[0], {
'techOrder': this.videoParams.tech,
'sources': [ ],
'debug': true,
'poster': this.videoParams.poster,
'controls': true,
'autoplay': false,
'preload': 'none',
'loop': false,
'flash': {
'swf': '/client/libraries/videojs/videojs.swf'
},
'children': {
'mediaLoader': {},
'posterImage': {},
'textTrackDisplay': {},
'loadingSpinner': {}
}
},
function() {}
);
function loadVideo( )
{
this.player.src( ( this.videoParams.type ) ? { type: this.videoParams.type, src: this.videoParams.link } : this.videoParams.link );
},
But in attempt of start of video: Uncaught TypeError: this.el_.vjs_getProperty is not a function ( Line: 10033 )
In HTML tech - everything is normal.
Perhaps I do something not so?
ange007
All 24 comments
We've had some difficulty knowing where this error is coming from. Which browser are you using, and is there live web page where we could see this happening?
heff
on 9 Jun 2015
This is unrelated to this issue, just curious. I feel like I've seen an uptick recently of people forcing Flash first with mp4 sources. What's your reasoning for doing that?
mmcc
on 9 Jun 2015
@mmcc , I so don't do, the initial call looks as - ['html5', 'flash'].
Simply the error is reproduced only on flash _(though in this test option I didn't work also html5)_.
And concerning an error, I replace a code in "\dist\examples\simple-embed\index.html":
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<!-- Default URLs assume the examples folder is included alongside video.js -->
<link href="../../video-js.min.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="../../video.min.js"></script>
</head>
<body>
<div id="video" class="video-js vjs-default-skin"></div>
<script>
var videoParams = { poster: 'http://video-js.zencoder.com/oceans-clip.png',
link: 'http://video-js.zencoder.com/oceans-clip.mp4',
type: 'video/mp4',
tech: [ 'flash' ] };
var player = new videojs( '#video',
{
'techOrder': videoParams.tech,
'sources': [ ],
'poster': videoParams.poster,
'controls': true,
'autoplay': false,
'preload': 'none',
'flash': { 'swf': "../../video-js.swf" }
},
function() {}
);
player.src( ( videoParams.type ) ? { type: videoParams.type, src: videoParams.link } : videoParams.link );
player.play( );
</script>
</body>
</html>
Windows 10, Chrome 43
Earlier this functionality worked normally.
ange007
on 9 Jun 2015
:+1: having this issue also, only using flash
sometimes only one error when I change video source (by disposing and recreating player)
sometimes one error per 0.5 second after I change video source (using the same method)
vikbez
on 24 Jun 2015
for my case, avoiding tracking time on flash object stopped the errors
(With this.stopTrackingCurrentTime(); on player creation)
good enough for now, but this is clearly not a solution
vikbez
on 25 Jun 2015
@vikbez I think you may be running into the issue from https://github.com/videojs/video.js/pull/2289. Do you have a stack trace for the error you're seeing?
dmlap
on 26 Jun 2015
tried to apply the fix: got less errors, but some are still here:
5.0.0 rc2 from official cdn: https://jsfiddle.net/qzv2bq5t/
same but with (adapted) #2289 patch: https://jsfiddle.net/9r5qcces/1/
thanks for looking into this
vikbez
on 26 Jun 2015
That patch is for stable (4.x). Would you mind trying it with that version? If it fixes your issue, we'll look at bringing it into the next 5.0 RC
dmlap
on 26 Jun 2015
here you go: 4.12.10 with patch: https://jsfiddle.net/9r5qcces/2/
no errors, but does not play.
vikbez
on 28 Jun 2015
This still happens on latest 4.X version
shaharmor
on 7 Aug 2015
No solution of this problem is present?
ange007
on 18 Aug 2015
I believe this was fixed in a recent 5.0 RC if anyone wants to try the latest version and confirm.
heff
on 15 Sep 2015
@heff We were having the same problem as part of of our work to upgrade to videojs 5.0 (when testing the Flash tech on OSX). I have been able to fix the issue by making Flash.protoype.buffered look something like
Flash.prototype.buffered = function buffered() {
var ranges = this.el_.vjs_getProperty('buffered');
if (!ranges.length || ranges.length === 0) {
return _utilsTimeRangesJs.createTimeRange();
}
return _utilsTimeRangesJs.createTimeRange(ranges[0][0], ranges[0][1]);
};
I noticed that ranges was coming in as a number so it was trying to create a time range and ranges[0] was returning undefined and hence it was blowing up.
wannabefro
on 2 Oct 2015
I have same problem with @wannabefro, and I'm using the same way to solve the error.
By the way, I'm using mangui/video-js-swf to support HLS.
crzidea
on 13 Nov 2015
Anyone want to get the latest version of videojs and the swf and test whether this is still an issue? Thanks.
gkatsev
on 17 Nov 2015
Still an issue with:
- video.js 5.4.4
- videojs-contrib-media-sources - v2.4.1
- videojs-contrib-hls - v1.2.1
fpn
on 12 Jan 2016
VideoJS: 5.5.3
HLS: 1.3.5 (which as I understand, compiles/includes 2.4.4)
I initialise a player on a page with HLS, no sources. I can then programmatically set the source on the videoJS object once, and then further attempts to update the source thereafter results in errors.
Seems to start when I attempt to check if the video is paused already
if (!player.paused()) { results in this.el_.vjs_getProperty is not a function
Everything thereafter seems to relate to the flash buffer at
var ranges = this.el_.vjs_getProperty('buffered'); inside of Flash.prototype.buffered = function buffered() {
darrennolan
on 3 Feb 2016
I believe this has been fixed in latest contrib-hls and videosjs.
Also, hopefully, in most browsers, contrib-hls can just use Html5 and MSE and forgo Flash altogether.
Closing this issue due to lack of activity. If it is still a problem and we get more information and a reduced test case, we will happily re-open the issue.
gkatsev
on 26 Jul 2016
maybe the videojs version I am using it has the issue. I 'll have to verify this first. I 'll let you know soon. Thanks for your response.
colabora001
on 11 Aug 2016
Still seeing this error when using videojs 5.12.6 and videojs-contrib-hls 3.6.12.
The below errors happen after showing another page(without video tag) from original page(videojs with flash tech). My app is a single application page based on angularjs.
Uncaught TypeError: this.el_.vjs_getProperty is not a function(…)b.buffered @ video.min_90f9c01.js:16b.bufferedPercent @ video.min_90f9c01.js:16(anonymous function) @ video.min_90f9c01.js:16e @ video.min_90f9c01.js:18e @ video.min_90f9c01.js:18
video.min_90f9c01.js:18 VIDEOJS: Video.js: currentTime unavailable on Flash playback technology element. TypeError: this.el_.vjs_getProperty is not a function(…)
video.min_90f9c01.js:18 VIDEOJS: ERROR: TypeError: this.el_.vjs_getProperty is not a function(…)c.logByType @ video.min_90f9c01.js:18i.error @ video.min_90f9c01.js:18d.dispatcher.d.dispatcher @ video.min_90f9c01.js:18k @ video.min_90f9c01.js:18a.trigger @ video.min_90f9c01.js:12_.(anonymous function) @ video.min_90f9c01.js:15e @ video.min_90f9c01.js:18e @ video.min_90f9c01.js:18d.dispatcher.d.dispatcher @ video.min_90f9c01.js:18k @ video.min_90f9c01.js:18a.trigger @ video.min_90f9c01.js:12(anonymous function) @ video.min_90f9c01.js:16e @ video.min_90f9c01.js:18
video.min_90f9c01.js:16
Uncaught TypeError: this.el_.vjs_getProperty is not a function(…)b.buffered @ video.min_90f9c01.js:16b.bufferedPercent @ video.min_90f9c01.js:16(anonymous function) @ video.min_90f9c01.js:16e @ video.min_90f9c01.js:18e @ video.min_90f9c01.js:18
zxkane
on 14 Dec 2016
I'm also experiencing this on 5.14.1 (with flash plugin 5.1.0). As I'm loading RTMP content on my site (live streaming), I cannot just use html5 as it's not currently (and likely won't ever be) supported there. If there is still interest in debugging this, I'm happy to set up a live reduced test case. Since this is related to live video, I can't provide a static link. However, this is the code in question:
<!DOCTYPE html>
<html>
<head>
<title>Video Player Test Page</title>
<link rel="stylesheet" type="text/css" href="/js/vjs/video-js.css">
<link rel="stylesheet" type="text/css" href="/js/vjs/video-js-skin.css">
<link rel="stylesheet" type="text/css" href="/css/site.css">
</head>
<body>
<div style="width: 100vw;height: 100vh">
<video class="video-js vjs-default-skin vjs-fill vjs-big-play-centered" controls autoplay preload id="streamPlayer"
width="100%" height="100%" poster="//stream.rachni.com/img/channel/channel_Len.png">
</video>
</div>
<script src="/js/vjs/videojs-5.14.1.js"></script>
<script>
videojs('streamPlayer', {
techOrder: ['flash'],
sources: [{
src: 'rtmp://stream.rachni.com/live&Fanfest',
type: 'rtmp/flv',
label: 'Flash'
}],
});
</script>
</body>
</html>
It's extremely inconsistent, and I haven't been able to track down what specifically triggers it. Some days it will work flawlessly, others it will error out on every other attempt to load the video.
Fenrirthviti
on 24 Dec 2016
We started getting this error intermittently a couple months ago on Safari, and over time the frequency increased until the failure rate is virtually 100%. I spent some time debugging it today, and I discovered that, in our case, the culprit is that we render our own custom controls on top of the flash object element (we have a complex player UI, so we simply delegate the rendering of the video itself to videojs).
The markup is structured something similar like this:
<div id='wrapper'>
<div id='video-canvas'>
<div id='vjs_video_1'>
<object ... />
</div>
</div>
<div id='player-overlay'>
[player controls here]
</div>
</div>
While it's not a "real" solution for our app, I can get playback to succeed every time by simply removing the #player-overlay div. My theory is that Safari has implemented some rather naive heuristics to detect whether or not the flash player is hidden, which it then uses to interfere with the Flash functionality in some inhibiting way.
Anyway, that's not a very reusable solution, but I figured I'd post it here incase it mirrors the problems anyone else is having with this error.
jmar777
on 9 Mar 2017
Thanks for posting @jmar777! That definitely looks in-line with what we've seen where Safari is super aggressively hiding and stopping the flash player.
gkatsev
on 9 Mar 2017
@gkatsev no problem! By the way, here's how we resolved this on our end:
Referencing my sample markup in my previous comment, we previously had:
#wrapperstyled withposition: relative#player-overlaystyled withposition: absolute; top/right/left/bottom: 0- Inside of
#player-overlay, we had#top-barand#bottom-bardivs that were absolutely positioned to the top and bottom respectively.
The fix ended up being remarkably simple: all we had to do was remove all styles on #player-overlay. Since it was no longer a positioned element, that made #wrapper the offset parent for the #top-bar and #bottom-bar divs, and because it had the same dimensions as #player-overlay, resulted in no visual difference.
So, to theorize on what the significant change for Safari was: before we had a transparent div that covered the _entire_ object element, whereas now we just have a couple divs that _partially_ cover it. I'm not sure whether it's bad heuristics for whether or not it's hidden, or if they just want to insure that the flash object itself is clickable, but either way this change made it happy. Hopefully that's helpful!
jmar777
on 10 Mar 2017
Related issues
jeonghwaYoo
·
3Comments
kocoten1992
·
4Comments
pblasi
·
3Comments
victorpfm
·
4Comments
gfviegas
·
3Comments
Most helpful comment
Still seeing this error when using
videojs 5.12.6andvideojs-contrib-hls 3.6.12.The below errors happen after showing another page(without video tag) from original page(videojs with flash tech). My app is a single application page based on angularjs.