third_party/WebKit/LayoutTests/media/video-autoplay-experiment-modes.html

   1 <html>
   2 <video autoplay controls></video>
   3 <script src=media-file.js></script>
   4 <script src=video-test.js></script>
   5 <body>
   6 <pre>
   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.
   9
  10   The "results" table contains one row per config tested.
  11   == Test Inputs ==
  12   #      - config number, in case you'd like to run just one.
  13   Flags  - autoplay experiment setting being tested.
  14                a      - "foraudio"
  15                v      - "forvideo"
  16                M      - "ifmuted"
  17                p      - "playmuted"
  18                m      - "ifmobile"
  19                For example, EM means "enabled-ifmuted".
  20   Type   - audio or video element?
  21                audio  - <audio>
  22                video  - <video>
  23   Play w/- how is play requested?
  24                none   - play is not requested.
  25                attr   - autoplay attribute is set on the element.
  26                play() - play() called after media is ready to play.
  27   Mute   - how is media muted?
  28                no   - media is not muted.
  29                yes  - muted attribute is set on the element.
  30   Mobile - is page optimized for mobile?
  31                no   - page is not optimized for mobile.
  32                yes  - page is optimized for mobile.
  33
  34   == Test Outputs ==
  35   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
  37             reported as "-".
  38
  39 </pre>
  40 <table id="results">
  41 <tr>
  42 <td>#</td>
  43 <td>Flags</td>
  44 <td>Type</td>
  45 <td>Play w/</td>
  46 <td>Mute</td>
  47 <td>Mobile</td>
  48 <td>Played?</td>
  49 <td>Muted?</td>
  50 </tr>
  51 </table>
  52 </body>
  53
  54 <script>
  55
  56 // Starting configuration number.  This should be zero normally.
  57 var configNumber = 0;
  58
  59 var mediaFile = findMediaFile("video", "content/test");
  60 var onscreenParent = document.createElement("div");
  61 document.body.insertBefore(onscreenParent, document.body.firstChild);
  62 // When we remove the meta tag from the document, we put it here.
  63 var isOptimizedForMobile = false;
  64
  65 function didPlaybackStart(video)
  66 {
  67     // We say that the video started if it's not paused or if it played and
  68     // already ended.
  69     return !video.paused || video.ended;
  70 }
  71
  72 function becomeOptimizedForMobile(enable)
  73 {
  74     // If we're in the right state already, then return;
  75     if (enable == isOptimizedForMobile)
  76         return;
  77
  78     if (!enable) {
  79         // We can't transition out of optimized for mobile.
  80         console.log("becomeOptimizedForMobile: test is broken -- cannot un-enable mobile");
  81         endTest();
  82     } else {
  83         // This only works once.
  84         mobileMetaTag = document.createElement('meta');
  85         mobileMetaTag.name = "viewport";
  86         mobileMetaTag.content = "width=device-width";
  87         document.head.appendChild(mobileMetaTag);
  88         isOptimizedForMobile = true;
  89     }
  90 }
  91
  92 function addResultsRow(spec)
  93 {
  94     // Add a row to the results table.
  95     var row = document.getElementById("results").insertRow();
  96     var td = row.insertCell();
  97
  98     // Add experiment number
  99     row.insertCell().innerText = (""+spec.experimentNumber);
 100
 101     // Process experiment type specially.
 102     var type = spec.experimentType;
 103     var smallType = "";
 104     smallType += (type.indexOf("-forvideo")>-1)?"v":"";
 105     smallType += (type.indexOf("-foraudio")>-1)?"a":"";
 106     smallType += (type.indexOf("-ifmuted")>-1)?"M":"";
 107     smallType += (type.indexOf("-playmuted")>-1)?"p":"";
 108     smallType += (type.indexOf("-ifmobile")>-1)?"m":"";
 109     row.insertCell().innerText = smallType;
 110
 111     // Add remaining fields.
 112     var fields = [ "elementType", "autoplayType", "mutedType", "mobileType",
 113         "played", "muted"];
 114     for(idx in fields)
 115         row.insertCell().innerText = spec[fields[idx]].substring(0,7);
 116 }
 117
 118 function configureElementViaScript(element, spec)
 119 {
 120     if(spec.autoplayType == "play()")
 121         element.play();
 122 }
 123
 124 function queueNextExperiment()
 125 {
 126     // Start the next config, but let the event queue drain.
 127     setTimeout(runNextConfig, 0);
 128 }
 129
 130 function checkElementStatus(element)
 131 {
 132     // Update the spec with the results.
 133     var didStart = didPlaybackStart(element);
 134     element.spec.played = didStart ? "played" : "no";
 135     element.spec.muted = didStart ? (element.muted ? "muted" : "unmuted") : "-";
 136
 137     addResultsRow(element.spec);
 138     element.remove();
 139
 140     queueNextExperiment();
 141 }
 142
 143 function runOneConfig(spec)
 144 {
 145     internals.settings.setAutoplayExperimentMode(spec.experimentType);
 146
 147     // Create, configure, and attach a media element.
 148     var element = document.createElement(spec.elementType);
 149     element.controls = true;
 150
 151     onscreenParent.appendChild(element);
 152
 153     // Set any attributes before canPlayThrough.
 154     if (spec.mutedType == "yes")
 155         element.muted = true;
 156     if (spec.autoplayType == "attr")
 157         element.autoplay = true;
 158     becomeOptimizedForMobile(spec.mobileType == "yes");
 159
 160     // Record the spec in the element, so that we can display the
 161     // results later.
 162     element.spec = spec;
 163
 164     // Wait for canplaythrough before continuing, so that the media
 165     // might actually be playing.
 166     element.addEventListener("canplaythrough", function()
 167     {
 168         // Now that we can play, if we're supposed to play / mute via js do so.
 169         configureElementViaScript(element, spec);
 170
 171         // Record the results.
 172         checkElementStatus(element);
 173     });
 174
 175     // Set the source, which will eventually lead to canPlayThrough.
 176     element.src = mediaFile;
 177 }
 178
 179 var experimentTypes = [
 180     "none",
 181     "enabled-forvideo",
 182     "enabled-forvideo-ifmuted",
 183     "enabled-forvideo-playmuted",
 184     "enabled-foraudio",
 185     "enabled-forvideo-ifmobile",
 186 ];
 187 var elementTypes = ["video", "audio"];
 188 var autoplayTypes = ["none", "attr", "play()"];
 189 var mutedTypes = ["no", "yes"];
 190 // mobileTypes must always start with no, since we cannot un-optimize the page.
 191 var mobileTypes = ["no", "yes"];
 192
 193 function runNextConfig()
 194 {
 195     // Convert configNumber into a spec, and run it.
 196     var exp = configNumber;
 197
 198     // Convert this experiment number into settings.
 199     var spec = {};
 200     spec.elementType = elementTypes[exp % elementTypes.length];
 201     exp = Math.floor(exp / elementTypes.length);
 202     spec.experimentType = experimentTypes[exp % experimentTypes.length];
 203     exp = Math.floor(exp / experimentTypes.length);
 204     spec.autoplayType = autoplayTypes[exp % autoplayTypes.length];
 205     exp = Math.floor(exp / autoplayTypes.length);
 206     spec.mutedType = mutedTypes[exp % mutedTypes.length];
 207     exp = Math.floor(exp / mutedTypes.length);
 208     // 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
 210     // optimized for mobile".
 211     spec.mobileType = mobileTypes[exp % mobileTypes.length];
 212     exp = Math.floor(exp / mobileTypes.length);
 213     spec.experimentNumber = configNumber;
 214
 215     // Return null if configNumber was larger than the highest experiment.
 216     if (exp > 0)
 217         endTest();
 218
 219     configNumber++;
 220
 221     // To keep the test fast, skip a few combinations.
 222     var skip = false;
 223     if (spec.experimentType.indexOf("-ifmuted") == -1 && spec.mutedType != "no")
 224         skip = true;
 225
 226     // Only allow basic combinations for the mobile case.  We just want to
 227     // test video with autoplay, no mute options when testing -ifmobile.
 228     // Similarly, if we're setting the page to be optimied for mobile, then
 229     // require that we're one of those tests.
 230     if ((spec.mobileType == "yes" || spec.experimentType.indexOf("-ifmobile")>0)
 231         && (spec.elementType != "video" || spec.autoplayType != "attr"
 232             || spec.mutedType != "no"
 233             || (spec.experimentType != "enabled-forvideo"
 234                 && spec.experimentType != "enabled-forvideo-ifmobile")))
 235         skip = true;
 236
 237     if (skip)
 238         queueNextExperiment();
 239     else
 240         runOneConfig(spec);
 241 }
 242
 243 window.internals.settings.setMediaPlaybackRequiresUserGesture(true);
 244 runNextConfig();
 245
 246 </script>
 247 </html>