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

Posted web前端开发技术

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页视频播放方案chimee 组件使用相关的知识,希望对你有一定的参考价值。

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 组件使用的主要内容,如果未能解决你的问题,请参考以下文章

让我为你介绍一个神器:Chimee,一套可扩展的 H5 视频播放器解决方案

ATP应用测试平台——使用vue-video-player视频播放组件实现网页视频流的播放案例实战

网页中加入视频播放组件,并使用ffmpeg对视频转编码

React Native知识8-WebView组件

如何从网页下载并播放ts格式的视频

播放器播放视频画面均变暗(但网页视频正常)的解决方案