The lack of StyleSheet.rules (instead of cssRules) make videojs player fails (also addRule() and removeRule() )
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
People
(Reporter: alex_mihail, Assigned: emilio)
References
()
Details
(Keywords: dev-doc-complete, webcompat:contact-ready, Whiteboard: [cssRule][webcompat:p1][wpt-failing][wptsync upstream])
Attachments
(1 file)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
Steps to reproduce:
Visit https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/ - just one example of a "Brightcove" video player that will not load, I have been seeing these everywhere and even on a clean, blank FireFox profile it will not load.
Actual results:
Video player doesn't load - console spits out error: "AbortError: The fetching process for the media resource was aborted by the user agent at the user's request."
Expected results:
Video player should have loaded
Updated•6 years ago
|
Comment 1•6 years ago
|
||
I can confirm this happens on Nightly 68.0a1 (2019-04-19) (64-bit) in a fresh profile.
Comment 2•6 years ago
|
||
Jean-Yves, any thoughts on who should take a look at this?
Comment 3•6 years ago
|
||
lots of errors in the console:
vis change0 loader.js:14:5684
Invalid URI. Load of media resource failed. video.php
TypeError: document.body is null c8ee9446-97ed-462f-a5e9-1af66c8e9104-web.js:2:104688
VIDEOJS: Play middleware has been registered with videojs index.min.js:1:63772
TypeError: s is undefined index.min.js:1:782686
received debugLog length: 396 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 2 extractMediaInfo.js:215:9
TypeError: data.share is undefined app.js:14:256
TypeError: "document.getElementById(...) is null"
<anonymous> https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/:544
sl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ql https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Jl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
yv https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
v https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
eg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
fg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
uj https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
push https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ya https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
va https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
onload https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
pubads_impl_2019041801.js:1:66300
Powered by AMP ⚡ HTML – Version 1904200955460 https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/ amp4ads-v0.js:588:100
Powered by AMP ⚡ HTML – Version 1904200955460 https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/ amp4ads-v0.js:588:100
received debugLog length: 5420 extractMediaInfo.js:211:9
debugLog objects.keys length: 13 extractMediaInfo.js:214:9
debugLog messages.keys length: 35 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
Failed to load thumbnail https://images-dup.taboola.com/taboola/image/fetch/f_jpg%2Cq_auto%2Ch_140%2Cw_140%2Cc_fill%2Cg_faces:auto%2Ce_sharpen/https%3A//www.unilad.co.uk/wp-content/uploads/2017/04/1247-LFP-birth-Bancroft-73-1024x684@2x.jpg for item=7420041269642947164, loading default thumbnail instead impl.354-564-RELEASE.js:3:726
The script from “https://aa.agkn.com/adscores/g.json?sid=9202507693” was loaded even though its MIME type (“application/json”) is not a valid JavaScript MIME type. rt=ifr
The script from “https://15.taboola.com/tb?oid=15&pubnm=uniladuk&unitType=244&tbloc=&pageType=text&pstn=Below%20Article%20Thumbnails&uuip=Feed%20-%20Below%20Article%20Thumbnails&cisrf=&cirf=https%3A%2F%2Fwww.unilad.co.uk%2Fanimals%2Fbear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort%2F&encoded=1&uid=c4e85000-cdb6-4577-9a6c-304e66fd7258-tuct3c14b59&variant=-100|1173147132&callback=TRC.videoTagCallbacks.videoCallback1&cb=1556596420983&tagid=&cntry=AU&platform=1&sesid=da19fb8529ea2fde5c8cde8ff42c64e6&itemid=/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort&viewid=1556596420348&geolat=&geoing=&deviceifa=&appid=&sd=v2_da19fb8529ea2fde5c8cde8ff42c64e6_c4e85000-cdb6-4577-9a6c-304e66fd7258-tuct3c14b59_1556596185_1556596420_CNawjgYQuJxGGPzdgeOmLSADKAEwEDiu_QZA9YUQSLmrGFDvmgJYAGAA&ri=60bdcf9500fe7db358e01da1914f4c7e&appname=&cdb=&gdprApplies=false&sii=4879456216713686715” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type. bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort
received debugLog length: 429730 extractMediaInfo.js:211:9
debugLog objects.keys length: 32 extractMediaInfo.js:214:9
debugLog messages.keys length: 2633 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
TypeError: "document.getElementById(...) is null"
<anonymous> https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/:544
sl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ql https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Jl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
yv https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
v https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
eg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
fg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
uj https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
push https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ya https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
va https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
onload https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
pubads_impl_2019041801.js:1:66300
The script from “https://pixel.advertising.com/ups/58166/sync?gdpr=1&uid=&_origin=1&redir=true” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type. st
The script from “https://vidstat.taboola.com/dsm/163/dsm.js” was loaded even though its MIME type (“application/octet-stream”) is not a valid JavaScript MIME type. bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort
Content Security Policy: Directive ‘child-src’ has been deprecated. Please use directive ‘worker-src’ to control workers, or directive ‘frame-src’ to control frames respectively.
Content Security Policy: Directive ‘child-src’ has been deprecated. Please use directive ‘worker-src’ to control workers, or directive ‘frame-src’ to control frames respectively.
An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing container.html:8
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
a: 0ms - timer ended sca.17.4.95.js:32:8009
Array.slice is deprecated; use Array.prototype.slice instead sca.17.4.95.js:32:2336
onmozfullscreenerror is deprecated. sca.17.4.95.js:33:3442
WebRTC interfaces with the “moz” prefix (mozRTCPeerConnection, mozRTCSessionDescription, mozRTCIceCandidate) have been deprecated. sca.17.4.95.js:33:4653
The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature. rtb-h
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 618 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 617 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
Empty string passed to getElementById(). tag:31:109
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 4359 extractMediaInfo.js:211:9
debugLog objects.keys length: 32 extractMediaInfo.js:214:9
debugLog messages.keys length: 3 extractMediaInfo.js:215:9
received debugLog length: 618 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 619 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
onmozfullscreenchange is deprecated. TQWvfC0Rjqi.js:263:5600
received debugLog length: 7285 extractMediaInfo.js:211:9
debugLog objects.keys length: 32 extractMediaInfo.js:214:9
debugLog messages.keys length: 28 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
XML Parsing Error: syntax error
Location: https://opps.taboola.com/OpportunityServlet
Line Number 1, Column 1: OpportunityServlet:1:1
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
XML Parsing Error: syntax error
Location: https://opps.taboola.com/OpportunityServlet
Line Number 1, Column 1: OpportunityServlet:1:1
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
Sounds like webcompat issue
![]() |
||
Comment 4•6 years ago
|
||
The video hosted on facebook is working.
But the videos using Brightcove videojs are indeed failing.
They are inserted through an iframe.
<iframe min-width="560"
class="brightcove-iframe lazyloaded"
src="//www.unilad.co.uk/frames/brightcove-iframe.html?videoId=6027927585001"
allowfullscreen=""
webkitallowfullscreen=""
mozallowfullscreen=""
data-rocket-lazyload="fitvidscompatible"
data-lazy-src="//www.unilad.co.uk/frames/brightcove-iframe.html?videoId=6027927585001"
data-was-processed="true"
width="100%" height="360" frameborder="0"></iframe>
If I open directly https://www.unilad.co.uk/frames/brightcove-iframe.html?videoId=6027927585001
we get the same issue, so maybe a better place to start the diagnosis.
The error message with s is undefined
is happening here.
(function() {
m.hookOnce("setup", function(e) {
var r = e.options_["data-player"];
var i = e.options_["data-embed"] || "default";
var n = ".bc-style-" + r + "-" + i;
var a = t.head.querySelector(n);
if (!a || a._increasedSpecificity) {
return;
}
a._increasedSpecificity = true;
var s = a.sheet.rules;
var o = ".bc-player-" + r + "_" + i;
for (var u = 0; u < s.length; u++) {
if (!s[u].selectorText) {
continue;
}
s[u].selectorText = s[u].selectorText.replace(o, o + o);
}
});
})(t, m);
on this line for (var u = 0; u < s.length; u++) {
s
is defined just before with var s = a.sheet.rules;
a
is
<style type="text/css" class="bc-style-OjXFXUz10-default">
.bc-player-OjXFXUz10_default *,
.bc-player-OjXFXUz10_default:after,
.bc-player-OjXFXUz10_default:before {
box-sizing: inherit;
font-size: inherit;
color: inherit;
line-height: inherit
}
/* plenty more rules */
</style>
a.sheet
is defined, but a.sheet.rules
is not a thing in Gecko world, but it exists in WebKit/Blink world.
a.sheet.cssRules
is a thing and it is 138 long. They should use that.
I thought we had a Bugzilla bug for this, but it doesn't seem or I can find it right now. Anyway if they are willing to fix it. It will be to just use cssRules and if they are sure they will hit very old system.
to have a var rules = a.sheet.cssRules | a.sheet.rules
They seem to use the hosted version of brightcove player with version 5.1.0
The current version is VERSION 6 - v6.34.3
There is https://github.com/whatwg/compat/issues/98 for addRule.
Moving to CSSOM for now, but maybe should live in WebCompat. We could open a specific issue for it.
Blink discussed about removing the set of rules around it.
https://bugs.chromium.org/p/chromium/issues/detail?id=689684
but usage seems to be high.
https://www.chromestatus.com/metrics/feature/timeline/popularity/219
So I'm pushing this to contactready and it would be good to contact either brightcove about it.
OR to contact the site itself ans ask them to use a more recent version of Brightcove. That must have been fixed in recent versions, because we would have a lot more reports if not.
Assignee | ||
Updated•6 years ago
|
Assignee | ||
Comment 5•6 years ago
|
||
It's not worth dying on this hill. Both Blink and WebKit pass the tests.
Spec PR in https://github.com/w3c/csswg-drafts/pull/3900.
Updated•6 years ago
|
Comment 7•6 years ago
|
||
bugherder |
Updated•6 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Comment 10•6 years ago
|
||
Documentation updates; these include a number of previously unwritten pages that we never got around to before as a bonus!
- Cleanup and updates to CSSStyleSheet overview page
- Documented CSSStyleSheet.cssRules
- Documented CSSStyleSheet.rules
- Documented CSSStyleSheet.ownerRule
- Documented CSSStyleSheet.addRule()
- Documented CSSStyleSheet.removeRule()
- Updated CSSStyleSheet.deleteRule()
- Updated CSSStyleSheet.insertRule()
- Submitted BCD PR 4380
- Listed on Firefox 68 for developers
Description
•