1、概述
鉴于⽬前 H5-Video 在 Web ⽣态环境中存在较⼤差异化(兼容性)的表现,本⽂主要介绍使⽤奇舞团开发chimee 组件进⾏视频播放的⽤法。 chimee 组件地址:
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="/chimee-player/1.1.10/chimee-player.browser.js"></script>
<script>
new ChimeePlayer({
wrapper: '#wrapper', // video dom容器
src: '/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: '/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⽂件位于: