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. head first (二)：观察者模式

    首先推荐一下别人写的,很不错可以参考,http://www.cnblogs.com/li-peng/archive/2013/02/04/2892116.html 1.定义 观察者模式:在对象之间定义 ...

  2. Disruptor源码分析

    本文将介绍Disruptor的工作机制,并分析Disruptor的主要源码 基于的版本是3.3.7(发布于2017.09.28) 水平有限,如有谬误请留言指正 0. 什么是Disruptor? Dis ...

  3. 实现用http上传文件，用ftp下载文件

    1.ftp配置 1.检查安装vsftpd软件 使用如下命令#rpm -qa |grep vsftpd可以检测出是否安装了vsftpd软件, 如果没有安装,使用YUM命令进行安装. 2.启动服务 使用v ...

  4. 面试问题Distilled

    1. 你在项目里都用过哪些Spring的组件 2. Spring AOP的实现原理 3. Hibernate的乐观锁和悲观锁 4. Hibernate的缓存机制 5. 对SOA的了解和认识 6. 谈谈 ...

  5. 购物平台webApp+服务后台开发

    服务器后台参考:Cloud BaaS 主站地址:http://cloudbaas.sinaapp.com/ 演示地址:http://jeebaas.sinaapp.com/ Mobile UI 框架: ...

  6. （转）关于Unity3D的编辑器崩溃时的线索定位

    今天在Unity3D编辑器中进行功能测试的时候,编辑器突然崩溃了(就是整个窗口突然消失,进程直接结束)之后也没有任何错误报告信息提示.好吧,应该是偶现问题,我侥幸地想,我用的好歹也是正版啊,不应该总出 ...

  7. 生成唯一code

    private String getCode() { List<String> ptypeCodeList = mapper.findCodeList(); String code = & ...

  8. 【记录一下】phpMyAdmin 4.5.0-beta1 发布，要求 PHP 5.5

    详情点击: [开源中国]http://www.oschina.net/news/65696/phpmyadmin-4-5-0-beta1 [phpMyAdmin]https://www.phpmyad ...

  9. ActiveMQ安装与持久化消息

    activityMQ官网:http://activemq.apache.org/ 有windows版与linux版  windows版启动 在bin目录下双击activemq.bat linux版的安 ...

  10. 直接拿来用！最火的iOS开源项目（三）

    相比Android,GitHub上的iOS开源项目更可谓是姹紫嫣红.尽管效果各异,但究其根源,却都是因为开发者本身对于某种效果的需求以及热爱.在“直接拿来用!最火的iOS开源项目”系列文章(一).(二 ...