http视频源 MIP 百度解决方案 (#823)

* 修改 mip-link 的文档说明，添加 data-type 属性说明 * 修改 mip-link 的文档说明，添加 data-type 属性说明 * 组件 support new cache url * 组件 support new cache url * 新增视频百度解决方案 * 优化代码 * 优化代码 * 优化代码 * 代码优化 * 代码优化 * 代码优化 * 代码优化 * mip-vd-baidu is ready
mipengine · Oct 10, 2017 · abecebd · abecebd
1 parent 190bfb9
commit abecebd
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 0 deletions.
diff --git a/mip-vd-baidu/README.md b/mip-vd-baidu/README.md
@@ -0,0 +1,52 @@
+# mip-vd-baidu
+
+mip-vd-baidu http 视频源播放的百度解决方案
+
+标题|内容
+----|----
+类型|通用
+支持布局|responsive
+所需脚本|https://mipcache.bdstatic.com/static/v1/mip-vd-baidu/mip-vd-baidu.js
+
+## 示例
+
+### 基本用法
+```html
+<div>test</div>
+<mip-vd-baidu layout="responsive" width="640" height="360" title="儿童哮喘有哪些治疗方法？" src="http://gslb.miaopai.com/stream/dEST-EionCIPggTpYl485A__.mp4" poster="http://file.youlai.cn/cnkfile1/M00/01/73/ooYBAFhJCDSANm1IAADJf4ZphbA62.jpeg">
+</mip-vd-baidu>
+```
+
+## 属性
+
+### title
+
+说明：视频的标题
+必选项：是
+类型：string
+取值范围：无
+单位：无
+默认值：无
+
+### src
+
+说明：视频源地址
+必选项：是
+类型：url 类型
+取值范围：标准 url
+单位：无
+默认值：无
+
+### poster
+
+说明：视频源的封页
+必选项：是
+类型：图片 url 类型
+取值范围：标准图片 url
+单位：无
+默认值：无
+
+## 注意事项
+
+若缺少必填属性，http 的视频源在 MIP Cache  Url 下无法在当前页面播放
+
diff --git a/mip-vd-baidu/mip-vd-baidu.js b/mip-vd-baidu/mip-vd-baidu.js
@@ -0,0 +1,91 @@
+/**
+ * @file mip-vd-baidu 组件
+ * @author [email protected]
+ */
+
+define(function (require) {
+
+    var customElement = require('customElement').create();
+    var util = require('util');
+    var server = 'https://mipvideo.baidu.com/getvideo';
+
+    /**
+     * 构造元素，只会运行一次
+     */
+    customElement.prototype.firstInviewCallback = function () {
+        var that = this;
+        // 获得组件的 dom 对象
+        var element = that.element;
+        var videoData = {
+            'src_url': util.parseCacheUrl(location.href),
+            'video_url': element.getAttribute('src'),
+            'poster': util.parseCacheUrl(element.getAttribute('poster')),
+            'title': element.getAttribute('title')
+        };
+        var vSrc = videoData.video_url;
+        // 视频的 url 安当前页面的 protocol 不全 http 协议头
+        if (vSrc.indexOf('//') === 0) {
+            vSrc = location.protocol + vSrc;
+        }
+        var key = 'video_url';
+        videoData[key] = vSrc;
+        var notHttps = vSrc.indexOf('http://') === 0;
+        if (notHttps) {
+            fetch(that._makeUrl(server, videoData), {
+                credentials: 'include'
+            }).then(function (res) {
+                return res.json();
+            }).then(function (data) {
+                if (data && data.status === 0) {
+                    // 如果成功，替换成新的视频 url
+                    var key = 'video_url';
+                    videoData[key] = data.url;
+                }
+                that._useMipVideo(videoData);
+            }).catch(function (e) {
+                // 请求失败后的容灾
+                that._useMipVideo(videoData);
+            });
+        }
+        else {
+            // 是 https，直接在当前页播放
+            that._useMipVideo(videoData);
+        }
+
+    };
+
+    // 生成 fetch 的 url
+    customElement.prototype._makeUrl = function (server, urlParams) {
+        if (!urlParams) {
+            return server;
+        }
+        var firstKey = true;
+        for (var key in urlParams) {
+            if (urlParams.hasOwnProperty(key)) {
+                server += (!firstKey ? '&' : '?') + key + '=' + encodeURIComponent(urlParams[key]);
+                firstKey = false;
+            }
+        }
+        return server;
+    };
+
+    // 使用 mip-video 进行播放， notice：目前没有强引组件 js，如果从内置组件移出，得考虑这块
+    customElement.prototype._useMipVideo = function (urlParams) {
+        if (!urlParams || !urlParams.src_url) {
+            return;
+        }
+        var vd = document.createElement('mip-video');
+        // 继承 mip-vd-baidu 的 layout
+        vd.setAttribute('layout', this.element.getAttribute('layout') || '');
+        vd.setAttribute('width', this.element.getAttribute('width') || '');
+        vd.setAttribute('height', this.element.getAttribute('height') || '');
+        // 设置组件需要的参数
+        vd.setAttribute('src', urlParams.video_url);
+        vd.setAttribute('poster', urlParams.poster);
+        vd.setAttribute('controls', '');
+        // 将 mip-video 直接替换 mip-vd-baidu
+        this.element.parentNode.replaceChild(vd, this.element);
+    };
+
+    return customElement;
+});
diff --git a/mip-vd-baidu/package.json b/mip-vd-baidu/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "mip-vd-baidu",
+    "version": "1.0.0",
+    "description": "组件介绍",
+    "contributors": [
+        {
+            "name": "lilangbo",
+            "email": "[email protected]"
+        }
+    ],
+    "engines": {
+        "mip": ">=1.1.0"
+    }
+}