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. python2.7安装Twisted报Microsoft Visual C++9.0 required

    环境: 操作系统:Windows 7 32位 语言:Python 2.7.9 Twisted: Twisted 安装,执行如下命令: pip install Twisted 报错如下: error:M ...

  2. Qt笔记——入门

    Qt的介绍 跨平台c++图形用户界面应用程序框架 Qt的框架 父类(基类)子类(派生类) 头文件 QApplication应用程序类 Qt头文件没有.h 头文件和类名一样 有且只有一个应用程序类的对象 ...

  3. spring报错 ：java.lang.NoSuchMethodException: <init>()

        Spring要求init-method是一个无参数的方法,如果init-method指定的方法中有参数,那么Spring将会抛出java.lang.NoSuchMethodException ...

  4. python VENV 环境 requirements.txt的生成、使用

    python项目 requirements.txt 文件,记录所有依赖包及其精确的版本号.用于新环境部署. 在虚拟环境中pip生成命令(正常环境类似): (venv) $ pip freeze > ...

  5. 一个LaTeX 中文文档的简单而实用的模板

    网上找的一个latex中文模板,感觉很简单,在我机器上有点小问题,完善记录一下. %要运行该模板,LaTex需要安装CJK库以支持汉字. %字体大小为12像素,文档类型为article %如果你要写论 ...

  6. 路由网关zuul(七）

    一.定义 Zuul包含了请求的路由和过滤的2个主要的功能: 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础而过滤器功能则负责对请求处理过程进行干预,是实现请求校验,服 ...

  7. NOIP2011选择客栈

    n家客栈,1~n编号,每家按照某一种色调装饰,共k种,每家客栈都设有咖啡店,每家咖啡店均有各自的最低消费两位游客,要求住在颜色相同,且不是同一个客栈,在两人的客栈间选择咖啡店(包括他们住的客栈),要求 ...

  8. KMP+差分 文章过滤器 (filter)

    Description 给定一些短串,要求你在一个长串中,将这些短串部分变为\(*\) Input 第一行包括一个整数\(n\),表示短串的数量. 接下来的\(n\)行,为\(n\)个短串. 最后一行 ...

  9. Xamarin XAML语言教程构建ControlTemplate控件模板 (三)

    Xamarin XAML语言教程构建ControlTemplate控件模板 (三) (3)打开MainPage.xaml.cs文件,编写代码,实现主题的切换功能.代码如下: using System; ...

  10. 6.3（java学习笔记）缓冲流

    一.缓冲流 使用缓冲流后的输入输出流会先存储到缓冲区,等缓冲区满后一次性将缓冲区中的数据写入或取出. 避免程序频繁的和文件直接操作,这样操作有利于提高读写效率. 缓冲流是构建在输入输出流之上的,可以理 ...