LayoutTests/media/video-autoplay-experiment-modes.html - Issue 1329853004: Include viewport visibility checks for autoplay experiment.

Side by Side Diff: LayoutTests/media/video-autoplay-experiment-modes.html

Issue 1329853004: Include viewport visibility checks for autoplay experiment. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@autoplay_step1

Patch Set: rebased. Created 5 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
1 <html>	1 <html>

2 <video autoplay controls></video>	2 <video autoplay controls></video>

3 <script src=media-file.js></script>	3 <script src=media-file.js></script>

4 <script src=video-test.js></script>	4 <script src=video-test.js></script>

5 <body>	5 <body>

6 <pre>	6 <pre>

7 Check if the autoplay gesture override experiment works. There are a lot	7 Check if the autoplay gesture override experiment works. There are a lot

8 of config options, so this test just runs all of them.	8 of config options, so this test just runs all of them.

9	9

10 The "results" table contains one row per config tested.	10 The "results" table contains one row per config tested.

11 == Test Inputs ==	11 == Test Inputs ==

12 # - config number, in case you'd like to run just one.	12 # - config number, in case you'd like to run just one.

13 Flags - autoplay experiment setting being tested.	13 Flags - autoplay experiment setting being tested.

14 a - "foraudio"	14 a - "foraudio"

15 v - "forvideo"	15 v - "forvideo"

	16 V - "ifviewport"
	philipj_slow 2015/09/21 15:02:04 Also test ifpagevisible Also test ifpagevisible liberato (no reviews please) 2015/09/23 06:14:56 done. Show quoted text On 2015/09/21 15:02:04, philipj wrote: > Also test ifpagevisible done.
16 M - "ifmuted"	17 M - "ifmuted"

17 p - "playmuted"	18 p - "playmuted"

18 m - "ifmobile"	19 m - "ifmobile"

19 For example, EM means "enabled-ifmuted".	20 For example, vM means '-forvideo-ifmuted".

20 Type - audio or video element?	21 Type - audio or video element?

21 audio - <audio>	22 audio - <audio>

22 video - <video>	23 video - <video>

23 Play w/- how is play requested?	24 Play w/- how is play requested?

24 none - play is not requested.	25 none - play is not requested.

25 attr - autoplay attribute is set on the element.	26 attr - autoplay attribute is set on the element.

26 play() - play() called after media is ready to play.	27 play() - play() called after media is ready to play.

27 Mute - how is media muted?	28 Mute - how is media muted?

28 no - media is not muted.	29 no - media is not muted.

29 yes - muted attribute is set on the element.	30 yes - muted attribute is set on the element.

30 Mobile - is page optimized for mobile?	31 Mobile - is page optimized for mobile?

31 no - page is not optimized for mobile.	32 no - page is not optimized for mobile.

32 yes - page is optimized for mobile.	33 yes - page is optimized for mobile.

	34 View - is media in viewport?

	35 onscreen - element starts out onscreen.

	36 scroll - element starts offscreen, scrolled into view once

	37 it is ready to play.

	38 offscreen - element starts out offscreen and stays offscreen.

33	39

34 == Test Outputs ==	40 == Test Outputs ==

	41 Early? - did playback start before element was scrolled onscreen? For

	42 tests in which View!=scroll, this is reported as "-".

35 Played? - did playback start by the conclusion of the test?	43 Played? - did playback start by the conclusion of the test?

36 Muted? - was the media muted? If the media didn't play, then this is	44 Muted? - was the media muted? If the media didn't play, then this is

37 reported as "-".	45 reported as "-".

38	46

39 </pre>	47 </pre>

40 <table id="results">	48 <table id="results">

41 <tr>	49 <tr>

42 <td>#</td>	50 <td>#</td>

43 <td>Flags</td>	51 <td>Flags</td>

44 <td>Type</td>	52 <td>Type</td>

45 <td>Play w/</td>	53 <td>Play w/</td>

46 <td>Mute</td>	54 <td>Mute</td>

47 <td>Mobile</td>	55 <td>Mobile</td>

	56 <td>View</td>

	57 <td>Early?</td>

48 <td>Played?</td>	58 <td>Played?</td>

49 <td>Muted?</td>	59 <td>Muted?</td>

50 </tr>	60 </tr>

51 </table>	61 </table>

52 </body>	62 </body>

53	63

54 <script>	64 <script>

55	65

56 // Starting configuration number. This should be zero normally.	66 // Starting configuration number. This should be zero normally.

57 var configNumber = 0;	67 var configNumber = 0;

58	68

59 var mediaFile = findMediaFile("video", "content/test");	69 var mediaFile = findMediaFile("video", "content/test");

60 var onscreenParent = document.createElement("div");	70 var onscreenParent = document.createElement("div");

	71 // The onscreen parent's height is also used to make sure that the off-screen

	72 // parent is, in fact, off-screen.

	73 onscreenParent.style.height = "1000px";

61 document.body.insertBefore(onscreenParent, document.body.firstChild);	74 document.body.insertBefore(onscreenParent, document.body.firstChild);

62 // When we remove the meta tag from the document, we put it here.	75 // Is the page optimized for mobile? We can't un-optimize it.

63 var isOptimizedForMobile = false;	76 var isOptimizedForMobile = false;

	77 // Also create another root that's off the bottom of the window.

	78 var offscreenParent = document.createElement("div");

	79 document.body.appendChild(offscreenParent);

64	80

65 function didPlaybackStart(video)	81 function didPlaybackStart(element)

66 {	82 {

67 // We say that the video started if it's not paused or if it played and	83 return !element.paused \|\| element.ended;

68 // already ended.

69 return !video.paused \|\| video.ended;

70 }	84 }

71	85

72 function becomeOptimizedForMobile(enable)	86 function becomeOptimizedForMobile(enable)

73 {	87 {

74 // If we're in the right state already, then return;	88 // If we're in the right state already, then return;

75 if (enable == isOptimizedForMobile)	89 if (enable == isOptimizedForMobile)

76 return;	90 return;

77	91

78 if (!enable) {	92 if (!enable) {

79 // We can't transition out of optimized for mobile.	93 // We can't transition out of optimized for mobile.

(...skipping 16 matching lines...) Expand all Loading...
96 var td = row.insertCell();	110 var td = row.insertCell();

97	111

98 // Add experiment number	112 // Add experiment number

99 row.insertCell().innerText = (""+spec.experimentNumber);	113 row.insertCell().innerText = (""+spec.experimentNumber);

100	114

101 // Process experiment type specially.	115 // Process experiment type specially.

102 var type = spec.experimentType;	116 var type = spec.experimentType;

103 var smallType = "";	117 var smallType = "";

104 smallType += (type.indexOf("-forvideo")>-1)?"v":"";	118 smallType += (type.indexOf("-forvideo")>-1)?"v":"";

105 smallType += (type.indexOf("-foraudio")>-1)?"a":"";	119 smallType += (type.indexOf("-foraudio")>-1)?"a":"";

	120 smallType += (type.indexOf("-ifviewport")>-1)?"V":"";

106 smallType += (type.indexOf("-ifmuted")>-1)?"M":"";	121 smallType += (type.indexOf("-ifmuted")>-1)?"M":"";

107 smallType += (type.indexOf("-playmuted")>-1)?"p":"";	122 smallType += (type.indexOf("-playmuted")>-1)?"p":"";

108 smallType += (type.indexOf("-ifmobile")>-1)?"m":"";	123 smallType += (type.indexOf("-ifmobile")>-1)?"m":"";

109 row.insertCell().innerText = smallType;	124 row.insertCell().innerText = smallType;

110	125

111 // Add remaining fields.	126 // Add remaining fields.

112 var fields = [ "elementType", "autoplayType", "mutedType", "mobileType",	127 var fields = [ "elementType", "autoplayType", "mutedType", "mobileType",

113 "played", "muted"];	128 "visType", "playedEarly", "played", "muted"];

114 for(idx in fields)	129 for(idx in fields)

115 row.insertCell().innerText = spec[fields[idx]].substring(0,7);	130 row.insertCell().innerText = spec[fields[idx]].substring(0,7);

116 }	131 }

117	132

118 function configureElementViaScript(element, spec)	133 function configureElementViaScript(element, spec)

119 {	134 {

120 if(spec.autoplayType == "play()")	135 if(spec.autoplayType == "play()")

121 element.play();	136 element.play();

122 }	137 }

123	138

124 function queueNextExperiment()	139 function queueNextExperiment()

125 {	140 {

126 // Start the next config, but let the event queue drain.	141 // Start the next config, but let the event queue drain.

127 setTimeout(runNextConfig, 0);	142 setTimeout(runNextConfig, 0);

128 }	143 }

129	144

130 function checkElementStatus(element)	145 function checkElementStatus(element)

131 {	146 {

132 // Update the spec with the results.	147 // Update the spec with the results.

133 var didStart = didPlaybackStart(element);	148 var didStart = didPlaybackStart(element);

134 element.spec.played = didStart ? "played" : "no";	149 element.spec.played = didStart ? "played" : "no";

135 element.spec.muted = didStart ? (element.muted ? "muted" : "unmuted") : "-";	150 element.spec.muted = didStart ? (element.muted ? "muted" : "unmuted") : "-";

136	151

137 addResultsRow(element.spec);	152 addResultsRow(element.spec);

138 element.remove();	153 element.remove();

139	154

	155 // Scroll back to the top, in case this was a scrolling test.

	156 onscreenParent.scrollIntoView();

	157

140 queueNextExperiment();	158 queueNextExperiment();

141 }	159 }

142	160

143 function runOneConfig(spec)	161 function runOneConfig(spec)

144 {	162 {

145 internals.settings.setAutoplayExperimentMode(spec.experimentType);	163 internals.settings.setAutoplayExperimentMode(spec.experimentType);

146	164

147 // Create, configure, and attach a media element.	165 // Create, configure, and attach a media element.

148 var element = document.createElement(spec.elementType);	166 var element = document.createElement(spec.elementType);

149 element.controls = true;	167 element.controls = true;

150	168

151 onscreenParent.appendChild(element);	169 // Pick whether the element will be visible when canPlayThrough.
	philipj_slow 2015/09/21 15:02:04 What does the "when canPlayThrough" bit mean? The What does the "when canPlayThrough" bit mean? The layout will be done roughly instantly. liberato (no reviews please) 2015/09/23 06:14:56 At some point, canplaythrough will be generated, a Show quoted text On 2015/09/21 15:02:04, philipj wrote: > What does the "when canPlayThrough" bit mean? The layout will be done roughly > instantly. At some point, canplaythrough will be generated, and the autoplay experiment checks will be done. we are choosing if we want to pass or fail the visibility checks when that happens. why does this necessarily happen right away, though? philipj_slow 2015/09/25 15:32:27 I mean that this code is appending the element eit Show quoted text On 2015/09/23 06:14:56, liberato wrote: > On 2015/09/21 15:02:04, philipj wrote: > > What does the "when canPlayThrough" bit mean? The layout will be done roughly > > instantly. > > At some point, canplaythrough will be generated, and the autoplay experiment > checks will be done. we are choosing if we want to pass or fail the visibility > checks when that happens. > > why does this necessarily happen right away, though? I mean that this code is appending the element either to an onscreen element or an offscreen element right now, but the comment makes it sound like it has something to do with the canplaythrough event.
	170 if (spec.visType == "onscreen")

	171 onscreenParent.appendChild(element);

	172 else

	173 offscreenParent.appendChild(element);

152	174

153 // Set any attributes before canPlayThrough.	175 // Set any attributes before canPlayThrough.

154 if (spec.mutedType == "yes")	176 if (spec.mutedType == "yes")

155 element.muted = true;	177 element.muted = true;

156 if (spec.autoplayType == "attr")	178 if (spec.autoplayType == "attr")

157 element.autoplay = true;	179 element.autoplay = true;

	180

158 becomeOptimizedForMobile(spec.mobileType == "yes");	181 becomeOptimizedForMobile(spec.mobileType == "yes");

159	182

	183 spec.playedEarly = "-";

	184

160 // Record the spec in the element, so that we can display the	185 // Record the spec in the element, so that we can display the

161 // results later.	186 // results later.

162 element.spec = spec;	187 element.spec = spec;

163	188

164 // Wait for canplaythrough before continuing, so that the media	189 // Wait for canplaythrough before continuing, so that the media

165 // might actually be playing.	190 // might actually be playing.

166 element.addEventListener("canplaythrough", function()	191 element.addEventListener("canplaythrough", function()

167 {	192 {

168 // Now that we can play, if we're supposed to play / mute via js do so.	193 // Now that we can play, if we're supposed to play / mute via js do so.

169 configureElementViaScript(element, spec);	194 configureElementViaScript(element, spec);

170	195

171 // Record the results.	196 // If we're supposed to scroll the item onscreen after it is ready to

172 checkElementStatus(element);	197 // play, then do so now.

	198 if(spec.visType == "scroll") {

	199 // Record the play state here, too, before we scroll.

	200 spec.playedEarly = didPlaybackStart(element) ? "yes" : "no";

	201

	202 // We are supposed to scroll the player into view.

	203 element.scrollIntoView(true);

	204 window.internals.triggerAutoplayViewportCheck(element);
	philipj_slow 2015/09/21 15:02:04 What's going on here, isn't the scroll itself supp What's going on here, isn't the scroll itself supposed to trigger the play, or was that idea abandoned? (I don't think it's a sane behavior, but IIRC it would still be tested to see how people react.) liberato (no reviews please) 2015/09/23 06:14:56 the trigger happens after scrolling stops, not whe Show quoted text On 2015/09/21 15:02:04, philipj wrote: > What's going on here, isn't the scroll itself supposed to trigger the play, or > was that idea abandoned? (I don't think it's a sane behavior, but IIRC it would > still be tested to see how people react.) the trigger happens after scrolling stops, not when it starts. as in, flinging the page to the bottom won't automatically start every video on the page. philipj_slow 2015/09/25 15:32:27 Yes, but shouldn't the call to element.scrollIntoV Show quoted text On 2015/09/23 06:14:56, liberato wrote: > On 2015/09/21 15:02:04, philipj wrote: > > What's going on here, isn't the scroll itself supposed to trigger the play, or > > was that idea abandoned? (I don't think it's a sane behavior, but IIRC it > would > > still be tested to see how people react.) > > the trigger happens after scrolling stops, not when it starts. as in, flinging > the page to the bottom won't automatically start every video on the page. Yes, but shouldn't the call to element.scrollIntoView() eventually trigger the check again, or why is the manual triggerAutoplayViewportCheck needed here?
	205 // Once those are return, the state should be correct.
	philipj_slow 2015/09/21 15:02:04 Once the above two methods have returned? Maybe "T Once the above two methods have returned? Maybe "The new state should be observable synchronously"? liberato (no reviews please) 2015/09/23 06:14:56 Done. Show quoted text On 2015/09/21 15:02:04, philipj wrote: > Once the above two methods have returned? Maybe "The new state should be > observable synchronously"? Done.
	206 checkElementStatus(element, spec);

	207 } else {

	208 // Record the results immediately.

	209 checkElementStatus(element, spec);

	210 }

173 });	211 });

174	212

175 // Set the source, which will eventually lead to canPlayThrough.	213 // Set the source, which will eventually lead to canPlayThrough.

176 element.src = mediaFile;	214 element.src = mediaFile;

177 }	215 }

178	216

179 var experimentTypes = [	217 var experimentTypes = [

180 "none",	218 "none",

181 "enabled-forvideo",	219 "enabled-forvideo",

182 "enabled-forvideo-ifmuted",	220 "enabled-forvideo-ifviewport-ifpagevisible",

183 "enabled-forvideo-playmuted",	221 "enabled-forvideo-ifviewport-ifpagevisible-ifmuted",

	222 "enabled-forvideo-ifviewport-ifpagevisible-playmuted",

184 "enabled-foraudio",	223 "enabled-foraudio",

185 "enabled-forvideo-ifmobile",	224 "enabled-forvideo-ifmobile",

	225 "enabled-foraudio-ifviewport-ifpagevisible",

186 ];	226 ];

187 var elementTypes = ["video", "audio"];	227 var elementTypes = ["video", "audio"];

188 var autoplayTypes = ["none", "attr", "play()"];	228 var autoplayTypes = ["none", "attr", "play()"];

189 var mutedTypes = ["no", "yes"];	229 var mutedTypes = ["no", "yes"];

	230 var visTypes = ["onscreen", "scroll", "offscreen"];

190 // mobileTypes must always start with no, since we cannot un-optimize the page.	231 // mobileTypes must always start with no, since we cannot un-optimize the page.

191 var mobileTypes = ["no", "yes"];	232 var mobileTypes = ["no", "yes"];

192	233

193 function runNextConfig()	234 function runNextConfig()

194 {	235 {

195 // Convert configNumber into a spec, and run it.	236 // Convert configNumber into a spec, and run it.

196 var exp = configNumber;	237 var exp = configNumber;

197	238

198 // Convert this experiment number into settings.	239 // Convert this experiment number into settings.

199 var spec = {};	240 var spec = {};

200 spec.elementType = elementTypes[exp % elementTypes.length];	241 spec.elementType = elementTypes[exp % elementTypes.length];

201 exp = Math.floor(exp / elementTypes.length);	242 exp = Math.floor(exp / elementTypes.length);

202 spec.experimentType = experimentTypes[exp % experimentTypes.length];	243 spec.experimentType = experimentTypes[exp % experimentTypes.length];

203 exp = Math.floor(exp / experimentTypes.length);	244 exp = Math.floor(exp / experimentTypes.length);

204 spec.autoplayType = autoplayTypes[exp % autoplayTypes.length];	245 spec.autoplayType = autoplayTypes[exp % autoplayTypes.length];

205 exp = Math.floor(exp / autoplayTypes.length);	246 exp = Math.floor(exp / autoplayTypes.length);

206 spec.mutedType = mutedTypes[exp % mutedTypes.length];	247 spec.mutedType = mutedTypes[exp % mutedTypes.length];

207 exp = Math.floor(exp / mutedTypes.length);	248 exp = Math.floor(exp / mutedTypes.length);

	249 spec.visType = visTypes[exp % visTypes.length];

	250 exp = Math.floor(exp / visTypes.length);

208 // Mobile must always change last, so that all the "no" cases precede	251 // Mobile must always change last, so that all the "no" cases precede

209 // all the "yes" cases, since we can't switch the doc back to "not	252 // all the "yes" cases, since we can't switch the doc back to "not

210 // optimized for mobile".	253 // optimized for mobile".

211 spec.mobileType = mobileTypes[exp % mobileTypes.length];	254 spec.mobileType = mobileTypes[exp % mobileTypes.length];

212 exp = Math.floor(exp / mobileTypes.length);	255 exp = Math.floor(exp / mobileTypes.length);

213 spec.experimentNumber = configNumber;	256 spec.experimentNumber = configNumber;

214	257

215 // Return null if configNumber was larger than the highest experiment.	258 // Return null if configNumber was larger than the highest experiment.

216 if (exp > 0)	259 if (exp > 0)

217 endTest();	260 endTest();

218	261

219 configNumber++;	262 configNumber++;

220	263

221 // To keep the test fast, skip a few combinations.	264 // To keep the test fast, skip a few combinations.

222 var skip = false;	265 var skip = false;

223 if (spec.experimentType.indexOf("-ifmuted") == -1 && spec.mutedType != "no")	266 if (spec.experimentType.indexOf("-ifmuted") == -1 && spec.mutedType != "no")

224 skip = true;	267 skip = true;

225	268

226 // Only allow basic combinations for the mobile case. We just want to	269 // Only allow basic combinations for the mobile case. We just want to

227 // test video with autoplay, no mute options when testing -ifmobile.	270 // test video with autoplay, no mute options when testing -ifmobile.

228 // Similarly, if we're setting the page to be optimied for mobile, then	271 // Similarly, if we're setting the page to be optimied for mobile, then

229 // require that we're one of those tests.	272 // require that we're one of those tests.

230 if ((spec.mobileType == "yes" \|\| spec.experimentType.indexOf("-ifmobile")>0)	273 if ((spec.mobileType == "yes" \|\| spec.experimentType.indexOf("-ifmobile")>0)

231 && (spec.elementType != "video" \|\| spec.autoplayType != "attr"	274 && (spec.elementType != "video" \|\| spec.autoplayType != "attr"

232 \|\| spec.mutedType != "no"	275 \|\| spec.mutedType != "no"

	276 \|\| spec.visType != "onscreen"

233 \|\| (spec.experimentType != "enabled-forvideo"	277 \|\| (spec.experimentType != "enabled-forvideo"

234 && spec.experimentType != "enabled-forvideo-ifmobile")))	278 && spec.experimentType != "enabled-forvideo-ifmobile")))

235 skip = true;	279 skip = true;

236	280

	281 var mismatched =(spec.elementType == "video"

	282 && spec.experimentType.indexOf("-foraudio") > -1)

	283 \|\| (spec.elementType == "audio"

	284 && spec.experimentType.indexOf("-forvideo") > -1);

	285

	286 if (spec.autoplayType == "none" && spec.visType != 'onscreen')

	287 skip = true;

	288 else if (spec.experimentType.indexOf("-ifmuted") > -1 && spec.visType != "on screen")

	289 skip = true;

	290 else if (spec.visType == "offscreen" && spec.autoplayType != "attr")

	291 skip = true;

	292 else if (spec.experimentType.indexOf("-ifmuted") == -1 && spec.mutedType == "yes")

	293 skip = true;

	294 else if (spec.elementType == "audio" && spec.mutedType == "yes")

	295 skip = true;

	296 else if (spec.elementType == "audio" && spec.visType != "scroll")

	297 skip = true;

	298 else if (mismatched && spec.visType !="onscreen")

	299 skip = true;

	300 else if (mismatched && spec.autoplayType != "attr")

	301 skip = true;

	302

237 if (skip)	303 if (skip)

238 queueNextExperiment();	304 queueNextExperiment();

239 else	305 else

240 runOneConfig(spec);	306 runOneConfig(spec);

241 }	307 }

242	308

243 window.internals.settings.setMediaPlaybackRequiresUserGesture(true);	309 window.internals.settings.setMediaPlaybackRequiresUserGesture(true);

244 runNextConfig();	310 runNextConfig();

245	311

246 </script>	312 </script>

247 </html>	313 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/media/video-autoplay-experiment-modes-expected.txt » ('j') | Source/core/html/AutoplayExperimentHelper.h » ('J')