1、概述

鉴于目前 H5-Video 在 Web 生态环境中存在较大差异化（兼容性）的表现，本文主要介绍使用奇舞团开发chimee 组件进行视频播放的用法。

chimee 组件地址：

http://chimee.org/docs/index.html

2、chimee 组件特点

Chimee支持MP4、M3U8、FLV等多种媒体格式，同时它也帮我们解决了大部分的兼容性、差异化问题，包括全屏、自动播放、内联播放、直播解码等常见媒体播放需求。

 3、PC端 Chimee-Player解决方案

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>PC端 Chimee-Player解决方案</title>

    </head>

    <body>

        <div id="wrapper">

        </div>

        <script src="http://lib.baomitu.com/chimee-player/1.1.10/chimee-player.browser.js"></script>

        <script>

            new ChimeePlayer({

                wrapper: '#wrapper', // video dom容器

                src: 'http://chimee.org/vod/1.mp4',

                controls: true

            });

        </script>

    </body>

</html>

4、移动端 Chimee-Mobile-Player解决方案

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>移动端 Chimee-Mobile-Player解决方案</title>

    </head>

    <body>

        <div id="wrapper">

        </div>

        <!--注意路径-->

        <script src="chimee-mobile-player.js" type="text/javascript" charset="utf-8"></script>

        <script>

            new ChimeeMobilePlayer({

                wrapper: '#wrapper', // video dom容器

                src: 'http://chimee.org/vod/1.mp4',

                autoplay: true,

                controls: true,

                playsInline: true,

                preload: true,

                x5VideoPlayerFullscreen: true,

                x5VideoOrientation: true,

                xWebkitAirplay: true,

                muted: true

            });

        </script>

    </body>

</html>

chimee-mobile-player.js文件位于：https://github.com/Chimeejs/chimee-mobile-player/edit/master/lib/chimee-mobile-player.browser.js

网页视频播放方案chimee 组件使用的更多相关文章

  1. 7款Flash和Javascript网页视频播放器

    Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多……. 也许你 ...

  2. 建站技能get（1）— Asp.net MVC快速集成ckplayer网页视频播放器

    故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来说,新闻管理模块带视频的内容播放不了了. ...

  3. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

  4. 支持wmv、mpg、mov、avi格式的网页视频播放代码

    这2天一直在整金网奖的相关项目,比较头大的就是网页视频播放了,需要考虑各种不同格式的视频,然后找相应的视频播放器. 这次使用了2种方法对这些视频进行处理: 1.使用ckplayer网页视频播放器 ck ...

  5. 酷播迷你flv,mp4网页视频播放器(CuPlayerMini)V2.2版[经典黑]演示实例

    酷播迷你flv,mp4网页视频播放器(CuPlayerMini)V2.2版[经典黑]演示实例 http://www.cuplayer.com/cu/FreeDown/

  6. Video.js网页视频播放插件

        插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...

  7. 使用vcastr22.swf做flash版网页视频播放器

    flash的安装设置参考  Flash设置(各种版本浏览器包括低版本IE) 百度搜索下载vcastr22.swf文件 然后使用方式很简单,浏览器安装flash相关插件就能看了 视频路径主要在这里,视频 ...

  8. linux系统中Nginx+FFmPeg+vlc实现网页视频播放配置过程

    linux系统中Nginx+FFmPeg实现网页监控视频播放配置过程 1.安装好的nginx上添加模块nginx-http-fiv-module-master 此模块是rtmp模块的升级版,有它所有的 ...

  9. HTML5 自制本地网页视频播放器

    HTML5初试:本地视频用网页打开啦半个广告都可以没有,看来暴风什么的快要淘汰了. 视频格式还是有要求的,看来要备一个转码器. 格式 IE Firefox Opera Chrome Safari Og ...

随机推荐

  1. hdu 1534(差分约束)

    Schedule Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. poj 3230(初始化。。动态规划)

    Travel Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4353   Accepted: 1817 Descriptio ...

  3. ros 如何使用 openni2_launch

    There is very little actual code/etc in openni2_launch, it is mostly a thin wrapper around openni2_c ...

  4. Undefined index: validate（thinkphp）

    今天在用thinkphp3.23时发现错误 NOTIC: [8] Undefined index: validate  此处是thinkphp核心目录\Think\Model.class.php 第 ...

  5. Codeforces 626 B. Cards (8VC Venture Cup 2016-Elimination Round)

      B. Cards   time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  6. JavaScript处理异步请求的几种方式(取异步函数返回值)

    JavaScript处理异步的几种方式 Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个 ...

  7. Codeforces 1059E. Split the Tree

    题目:http://codeforces.com/problemset/problem/1059/E 用倍增可以在nlog内求出每个节点占用一个sequence 时最远可以向父节点延伸到的节点,对每个 ...

  8. C++string类常用函数

    C++string类常用函数 string类的构造函数:string(const char *s);    //用c字符串s初始化string(int n,char c);     //用n个字符c初 ...

  9. jenkins配置maven工程指定不同环境的配置文件打包

    打包命令 这里我们指定配置文件问test 这个是在pom.xml里面定义的, 里面有test,production和devlop三个定义 在不同环境使用Jenkins的时候,-P后面加上不同的参数 我 ...

  10. SSH框架的简单含义

    典型的J2EE三层结构,分为表现层.中间层(业务逻辑层)和数据服务层.三层体系将业务规则.数据访问及合法性校验等工作放在中间层处理.客户端不直接与数据库交互,而是通过组件与中间层建立连接,再由中间层与 ...