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. docker run 的背后的故事（zz）

    当利用docker run来创建并启动容器的时候,docker后台标准的操作包括: 1.检查本地是否存在指定的镜像,不存在就从公有仓库下载. 当我依瓢画葫芦的运行: sudo docker run - ...

  2. Linux删除重复行

    本文转自http://blog.csdn.net/ithomer/article/details/6926325 文本处理时,经常要删除重复行,下面是三种方法 第一,用sort+uniq,注意,单纯u ...

  3. APP中常见上下循环滚动通知的简单实现，点击可进入详情

    APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...

  4. 将datatable导出为excel的三种方式（转）

    一.使用Microsoft.Office.Interop.Excel.DLL 需要安装Office 代码如下:  2         public static bool ExportExcel(Sy ...

  5. 如何使用Jenkins进行持续集成测试

    如何使用Jenkins进行持续集成测试: 安装Java环境: 安装Jenkins:两种方式,直接运行文件:使用tomcat运行: 创建一个job,构建的时候选择 execute Windows bat ...

  6. python 去掉所有空白字符【解决】

    今天用python从access数据库读取内容,组合成sql语句时,空白字符把我给搞疯了.... 所幸找到了一个好办法: ''.join(s.split())

  7. python3爬虫爬取猫眼电影TOP100（含详细爬取思路）

    待爬取的网页地址为https://maoyan.com/board/4,本次以requests.BeautifulSoup css selector为路线进行爬取,最终目的是把影片排名.图片.名称.演 ...

  8. 转 select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET

    select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型,原型:int select(int maxfd,fd_set *rdset ...

  9. [BZOJ2823][BZOJ1336][BZOJ1337]最小圆覆盖(随机增量法)

    算法介绍网上有很多,不解释了. 给出三点坐标求圆心方法:https://blog.csdn.net/liyuanbhu/article/details/52891868 记得先random_shuff ...

  10. python3全栈开发-并发编程，多线程

    一.什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...