update page-transition video

spec/page-transition.md

@@ -14,7 +14,6 @@
 ### 按钮反馈
 
 <div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
 
 
@@ -37,7 +36,6 @@
 
 <link rel="stylesheet" href="/static/motionDemo.css">
 <div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
 
 
@@ -46,7 +44,7 @@
 从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
 
 <div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4" type="video/mp4"></video>
+
 </div>
 
 
@@ -61,7 +59,7 @@
 <script src="/static/motionDemoLoad.js"></script>
 
 <div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
+
 </div>
 
 > 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)

static/motion.js

@@ -742,13 +742,22 @@ $(function () {
   window.Motion = newMotion;
 
   var motionVideo = {
+    video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'],
+    videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'],
     init: function () {
       var self = this;
       self.videoBox = $(".video-player");
+      $('<video preload loop></video>').appendTo(self.videoBox);
       for (var i = 0; i < self.videoBox.length; i++) {
         var svg = new SVG();
         self.videoBox.eq(i).append(svg.node);
         var video = self.videoBox.eq(i).find("video");
+        console.log(video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"'));
+        if(video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) {
+          $('<source src="'+self.video[i]+'" type="video/webm">').appendTo(video);
+        }else{
+          $('<source src="'+self.videoMp4[i]+'" type="video/mp4">').appendTo(video);
+        }
         video.css({"width": "100%"});
         video.append(svg);
         svg.css({"position": "absolute", "top": 0, "left": 0});

static/motionDemoLoad.js

@@ -38,12 +38,12 @@ $(function () {
     var sc = scripts[i].src, str = sc.split('?')[1];
     if (sc.indexOf('motionDemoLoad.js') >= 0 && str) {
       var d = str.split('&');
-      urlData = d.map((s)=> {
+      urlData = d.map(function (s) {
         return {name: s.split('=')[0], param: s.split('=')[1]};
       });
     }
   }
-  urlData.map((m)=> {
+  urlData.map(function (m) {
     if (m.param === 'easing') {
       callback = function () {
         new Motion("#J-Linear", {