zoukankan      html  css  js  c++  java
  • 网页视频播放方案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

  • 相关阅读:
    noi2002银河英雄传说(并查集)
    Ural1076(km算法)
    km算法的个人理解
    函数之装饰器
    函数进阶(一)
    python全栈测试题(一)
    python基础之循环语句
    字符串方法总结
    python基础3
    python基础2
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8274265.html
Copyright © 2011-2022 走看看