在 MIP 中,一些资源的使用需要支持 HTTPS,视频就是其中一种。但目前大部分站点的视频资源都还是 HTTP 的资源,无法在百度 MIP 搜索结果中直接使用, mip-video 视频组件针对 HTTP 的视频资源采用跳到一个 HTTP 的播放页面进行播放,这种体验并非最佳。故 MIP 项目组联合百度搜索,推出在 MIP 中直接使用 HTTP 视频源进行播放的解决方案,那就是 mip-vd-baidu 组件。

怎么使用?

  1. 熟悉组件使用文档

    文档地址,需特别关注参数部分。
  2. 添加组件代码

    见如下示例:
<mip-vd-baidu
layout="responsive" width="640" height="360"
title="MIP 移动网页加速器 "
src="http://mip-doc.bj.bcebos.com/MIPSampleVideo.mp4"
poster="https://mip-doc.bj.bcebos.com/mip-video-poster.jpg">
</mip-vd-baidu>
  1. 添加组件所需脚本
<script src="https://c.mipcdn.com/static/v1/mip-vd-baidu/mip-vd-baidu.js">

技术实现原理

  1. 通过组件的参数生成视频请求的 URL;
  2. 请求百度 MIP 视频 server;
  3. 请求内容池,如果存在该视频资源,返回支持 https 的视频 URL,若不存在,返回原 URL,并调用视频抓取服务,将视频抓取放入内容池,需要添加 IP 白名单:123.125.71.*;
  4. 通过百度 MIP 视频 server 返回的视频 URL 做播放逻辑。

概括地说,百度 MIP 视频服务会通过抓取,将 HTTP 的视频源抓取到百度 MIP 视频内容池, 从而达到视频支持 HTTPS 的目的。

详细步骤见如下流程图:

声明

抓取的视频仅用于支持 MIP 页面中的播放,承诺不用做其他用途,视频归属站长所有。站长应保证原视频内容不存在任何侵权、违法、违规信息,保证不存在任何病毒或破坏性数据,视频内容均由站长提供并承担责任。站长使用视频抓取功能即是认可《百度 MIP 资源接入内容责任承诺书》,详见 http://ziyuan.baidu.com/wiki/910

HTTP 视频怎么在 MIP 页面中使用?的更多相关文章

  1. Discuz常见大问题-如何允许用户插入视频-如何自己在页面中插入视频

    从视频的下面分享中获取html代码 然后粘贴到你创建页面的指定位置(注意从优酷复制的视频宽度和高度可能比较小,你可以自己调整,或者占据100%) 最终的实现效果

  2. 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...

  3. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  4. 使用PHP的正则抓取页面中的网址

    最近有一个任务,从页面中抓取页面中所有的链接,当然使用PHP正则表达式是最方便的办法.要写出正则表达式,就要先总结出模式,那么页面中的链接会有几种形式呢?   链接也就是超级链接,是从一个元素(文字. ...

  5. HTML页面中常见的一些小方法

    在<Head>标签中加   <meta http-equiv="pragma " content="no-cache"> <met ...

  6. 新手教程:不写JS,在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  7. 如何使用Web3.js API 在页面中进行转账

    本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...

  8. 将flex页面嵌入到jsp页面中

    如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...

  9. Java与Flex学习笔记(20)---将flex页面嵌入到jsp页面中

    如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...

随机推荐

  1. 浅谈这个时代的SEO与网络营销

    1.大网站对分享内容的审核越来越严,高质量借道外链越来越难做. 2.大搜索引擎入口的权威性将会不断受各种方面的的削弱:比如自媒体.垂直服务网站等 3.旧路还没有短,但是新路要积极挖掘. 这也说的太少了 ...

  2. .net core2.0添加json文件并转化成类注入控制器使用

    上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢?经过钻研,办法有了. 既然一个一个读取比较麻烦,那么可以把它放入 ...

  3. 架构之微服务设计(Nginx + Upsync)

    Upsync,微博开源基于Nginx容器动态流量管理方案 . Nginx 以其超高的性能与稳定性,在业界获得了广泛的使用,微博的七层就大量使用了 Nginx .结合 Nginx 的健康检查模块,以及动 ...

  4. 使用Myeclipse2015构建SpringMVC项目

    1.新建web project 2.右键项目,给项目添加spring框架如图,不需要勾选任何一个选项. 3.在WebRoot/WEB-INF目录下添加web.xml内容如下: <?xml ver ...

  5. 浅谈Java多线程的同步问题 【转】

    多线程的同步依靠的是对象锁机制,synchronized关键字的背后就是利用了封锁来实现对共享资源的互斥访问. 下面以一个简单的实例来进行对比分析.实例要完成的工作非常简单,就是创建10个线程,每个线 ...

  6. JAVA小记 (1)

    JVM: Java虚拟机  JVM个数取决于同时执行的程序个数 JDK:JAVA 开发工具包 Java利用JVM实行跨平台 JRE:Java运行环境 JavaSE:企业版 GC:垃圾回收机制 命名规范 ...

  7. ImportError: numpy.core.multiarray failed to import

    1. ImportError: numpy.core.multiarray failed to import pip install -U numpy http://stackoverflow.com ...

  8. js基础进阶--编的实用技巧(一)

    我的个人博客:http://www.xiaolongwu.cn 在平时的开发中,编码技巧很重要,会让你少写很多代码,起到事倍功半的效果. 下面总结几种简单的技巧,大家共同学习一下 1. 利用+.-./ ...

  9. pycharm linux版快捷方式创建

    ****************************pycharm_linux安装and快捷方式创建******************1.下载好安装包之后解压:    tar -xfz 压缩包名 ...

  10. activiti工作流框架简介

    常见的工作流框架:activiti, JBPM, OSWorkflow activiti框架基于23张基础的表数据, 基于Mybatis操作数据库. JBPM框架基于18张基础的表数据, 基于hibe ...