1. 程式人生 > >網頁視頻播放方案chimee 組件使用

網頁視頻播放方案chimee 組件使用

ini obi pre device 表現 controls tle color index

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 組件使用