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. 两个sql设计方案的比较

    我有一个买方表Buyer,大概1万条记录:一个卖方表Sale,大概5万条记录.有一些买方和卖方之间是有某种关联的,这种关联关系被记录在Partner表里,Partner表中的关键字段包括BuyerID ...

  2. hdu 1062(DFS||dijkstra)

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44870   Accepted: 13259 Descripti ...

  3. log4j 输入不同日志文件

    log4j的强大功能无可置疑,但实际应用中免不了遇到某个功能需要输出独立的日志文件的情况,怎样才能把所需的内容从原有日志中分离,形成单独的日志文件呢?其实只要在现有的log4j基础上稍加配置即可轻松实 ...

  4. VS中使用Gulp

    关于gulp资料可以访问:http://www.gulpjs.com.cn/,本篇主要讲解在VS中使用gulp对js和css进行压缩合并 1.下载node.js,gulp依赖于node.js,可以访问 ...

  5. 【转载】Linux kill, killall, kill -9

    1) 查看进程的方法:  ps -ef  或者 ps aux root     15087  0.0  0.0      0     0 ?        S    23:31   0:00 [kwo ...

  6. asp.net中利用JSON进行增删改查中运用到的方法

    //asp.net中 利用JSON进行操作, //增加: //当点击“增加链接的时候”,弹出增加信息窗口,然后,在窗体中输入完整信息,点击提交按钮. //这里我们需要考虑这些:我会进行异步提交,使用j ...

  7. ZCMU训练赛-H（模拟）

    H - Hard to Play   MightyHorse is playing a music game called osu!. After playing for several months ...

  8. 树形DP求树的最小支配集,最小点覆盖,最大独立集

    一:最小支配集 考虑最小支配集,每个点有两种状态,即属于支配集合或者不属于支配集合,其中不属于支配集合时此点还需要被覆盖,被覆盖也有两种状态,即被子节点覆盖或者被父节点覆盖.总结起来就是三种状态,现对 ...

  9. Apache Kafka 企业级消息队列

    1.大纲 了解 Apache Kafka是什么 掌握Apache Kafka的基本架构 搭建Kafka集群 掌握操作集群的两种方式 了解Apache Kafka高级部分的内容 2.消息系统的作用是什么 ...

  10. volatile 和 Interlocked

    class Volatile_Test3 { ; public static void Test() { count = ; Task[] tasks = ]; ; i < tasks.Leng ...