fix(webkit): ensure WebKit can play h264 video (#3272)

microsoft · Aug 3, 2020 · de55fa6 · de55fa6
1 parent 402d1a6
commit de55fa6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/docs/docker/Dockerfile.bionic b/docs/docker/Dockerfile.bionic
@@ -33,7 +33,8 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libgstreamer-gl1.0-0 \
     libgstreamer-plugins-bad1.0-0 \
-    gstreamer1.0-plugins-good
+    gstreamer1.0-plugins-good \
+    gstreamer1.0-libav
 
 # 4. Install Chromium dependencies
 RUN apt-get update && apt-get install -y --no-install-recommends \

diff --git a/test/assets/video_mp4.html b/test/assets/video_mp4.html
@@ -0,0 +1,15 @@
+<html> 
+<body> 
+
+<video width="400" controls>
+  <source src="movie.mp4" type="video/mp4">
+  Your browser does not support h.264 HTML video.
+</video>
+
+<p>
+Video courtesy of 
+<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
+</p>
+
+</body> 
+</html>
diff --git a/test/capabilities.spec.js b/test/capabilities.spec.js
@@ -53,11 +53,14 @@ it.fail(WEBKIT && WIN)('should play video', async({page}) => {
   // TODO: the test passes on Windows locally but fails on GitHub Action bot,
   // apparently due to a Media Pack issue in the Windows Server.
   //
+  // Safari only plays mp4 so we test WebKit with an .mp4 clip.
+  const fileName = WEBKIT ? 'video_mp4.html' : 'video.html';
+  const absolutePath = path.join(ASSETS_DIR, fileName);
   // Our test server doesn't support range requests required to play on Mac,
   // so we load the page using a file url.
   const url = WIN
-      ? 'file:///' + path.join(ASSETS_DIR, 'video.html').replace(/\\/g, '/')
-      : 'file://' + path.join(ASSETS_DIR, 'video.html');
+      ? 'file:///' + absolutePath.replace(/\\/g, '/')
+      : 'file://' + absolutePath;
   await page.goto(url);
   await page.$eval('video', v => v.play());
   await page.$eval('video', v => v.pause());