search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.32k stars 2.92k forks source link

Dynamically setting Embed source errors on Android 6 and 7 #794

Open ashleahhill opened 6 years ago

ashleahhill commented 6 years ago

Expected behaviour

You should be able to setup Plyr using the markup for one kind of source, namely the HTML5 <video> element, and switch to another type of source, namely YouTube using plyr#source method without raising an error on plyr#media.

Actual behaviour

In Chrome 64 on the Nexus 6P plyr is throwing an error when you load YouTube using plyr#source looking at the logs, it seems to happen where the loadeddata, canplay, and canplaythrough events should be thrown. The embed is successful and the video is playable.

I also observed the same behavior on Plyr.io when switching to Vimeo. I have little experience working with Vimeo so I've concentrated on YouTube here.

This is an edge case, as this is a phone that could and should be updated to Android 8.0. My issue is mostly struggling to differentiate this ignorable error from another error that could be fatal. The way the error events are proxied, the only information that comes through is that an error type event was raised on plyr#container.

Update

I've tested on some other devices and I'm seeing plyr throw an error when I switch on devices running both 6.0.1 and 7.0.1

Environment

Players affected:

Steps to reproduce

Relevant links

Logs

Log on Nexus 6P when switching to YouTube

[Plyr] Config {enabled: true, debug: true, autoplay: false, loop: false, seekTime: 10, …}
plyr.js:1 [Plyr] Chrome 64
plyr.js:1 [Plyr] AJAX loading absolute SVG sprite
plyr.js:1 [Plyr] Injecting custom controls
plyr.js:1 [Plyr] Native fullscreen enabled
plyr.js:1 [Plyr] Caption track found; URI: https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt
plyr.js:1 [Plyr] TextTracks supported
plyr.js:1 [Plyr] event: setup {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: ready {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadeddata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplay {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplaythrough {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] Cancelled network requests
plyr.js:1 [Plyr] event: emptied {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: timeupdate {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadstart {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: progress {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadedmetadata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
www-widgetapi.js:88 Unrecognized feature: 'autoplay'.
Xa @ www-widgetapi.js:88
W @ www-widgetapi.js:76
Y @ www-widgetapi.js:96
oe @ plyr.js:1
(anonymous) @ plyr.js:1
(anonymous) @ plyr.js:1
O.object.e.onYouTubeIframeAPIReady @ plyr.js:1
(anonymous) @ www-widgetapi.js:118
(anonymous) @ www-widgetapi.js:118
plyr.js:1 [Plyr] event: error {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
bTqVqk7FSmY:1 Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.
plyr.js:1 [Plyr] Native fullscreen enabled
plyr.js:1 [Plyr] event: volumechange {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: timeupdate {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: ready {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}

Log with errors, switching to Vimeo on Nexus 6P

[Plyr] Config {enabled: true, debug: true, autoplay: false, loop: false, seekTime: 10, …}
plyr.js:1 [Plyr] Chrome 64
plyr.js:1 [Plyr] AJAX loading absolute SVG sprite
plyr.js:1 [Plyr] Injecting custom controls
plyr.js:1 [Plyr] Native fullscreen enabled
plyr.js:1 [Plyr] Caption track found; URI: https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt
plyr.js:1 [Plyr] TextTracks supported
plyr.js:1 [Plyr] event: setup {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: ready {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadeddata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplay {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplaythrough {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] Cancelled network requests
plyr.js:1 [Plyr] event: emptied {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: timeupdate {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadstart {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: progress {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadedmetadata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] Native fullscreen enabled
plyr.js:1 [Plyr] event: volumechange {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: ready {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: error {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: timeupdate {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}

Log with no errors, from Chrome on Mac switching to YouTube

[Plyr] Config {enabled: true, debug: true, autoplay: false, loop: false, seekTime: 10, …}
plyr.js:1 [Plyr] Chrome 64
plyr.js:1 [Plyr] AJAX loading absolute SVG sprite
plyr.js:1 [Plyr] Injecting custom controls
plyr.js:1 [Plyr] Native fullscreen enabled
plyr.js:1 [Plyr] Caption track found; URI: https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt
plyr.js:1 [Plyr] TextTracks supported
plyr.js:1 [Plyr] event: setup {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: ready {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadedmetadata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadeddata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplay {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplaythrough {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] Cancelled network requests
plyr.js:1 [Plyr] event: emptied {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: timeupdate {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadstart {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: progress {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadedmetadata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: loadeddata {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplay {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: canplaythrough {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
www-widgetapi.js:88 Unrecognized feature: 'autoplay'.
Xa @ www-widgetapi.js:88
W @ www-widgetapi.js:76
Y @ www-widgetapi.js:96
oe @ plyr.js:1
(anonymous) @ plyr.js:1
(anonymous) @ plyr.js:1
O.object.e.onYouTubeIframeAPIReady @ plyr.js:1
(anonymous) @ www-widgetapi.js:118
(anonymous) @ www-widgetapi.js:118
bTqVqk7FSmY:1 Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.
plyr.js:1 [Plyr] Native fullscreen enabled
plyr.js:1 [Plyr] event: volumechange {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: timeupdate {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
plyr.js:1 [Plyr] event: ready {getOriginal: ƒ, getContainer: ƒ, getEmbed: ƒ, getMedia: ƒ, getType: ƒ, …}
friday commented 6 years ago

Seems like a duplicate of #754. You should notice the actual error thrown is a big clue: Unrecognized feature: 'autoplay'

This error is thrown by youtube, not Plyr.

Phones rarely support autoplay with audio unless you mute it. This is being implemented for desktop browsers as well (Chrome 64 removed support for autoplay with audio unless you visited the domain and played media before). I would never use it, and haven't gotten this issue either.

Related links: https://developers.google.com/web/updates/2016/07/autoplay https://www.macrumors.com/2017/09/19/safari-11-released-macos-sierra-os-x-el-capitan/ https://venturebeat.com/2017/09/14/chrome-will-no-longer-autoplay-content-with-sound-in-january-2018/

ashleahhill commented 6 years ago

@friday

I'm getting the Unrecognized feature: 'autoplay' as a warning from the YouTube code on Chrome on my Mac, as well but plyr is, correctly, not treating that as an error.

Also, switching to Vimeo embed also causes plyr to throw an error but there's no Unrecognized feature: 'autoplay' warning happening there.