网页视频播放方案chimee 组件使用

2018-01-12 11:53:20来源:cnblogs.com作者:孟繁贵人点击

分享

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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台