1. Overview
In view of the fact that H5 video is quite different (compatible) in the Web ecological environment, this paper mainly introduces the usage of developing chimee component with qiwutuan to play video.
chimee component address:
http://chimee.org/docs/index.html
2. Features of chimee components
Chimee supports MP4, M3U8, FLV and other media formats. At the same time, it also helps us solve most of the compatibility and differentiation problems, including the common media playback requirements such as full screen, automatic playback, inline playback, live decoding, etc.
3. Chimee player solution on PC
<!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 end Chimee-Player Solution</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 container
src: 'http://chimee.org/vod/1.mp4',
controls: true
});
</script>
</body>
</html>
4. Chimee mobile player solution for mobile
<!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>Mobile end Chimee-Mobile-Player Solution</title>
</head>
<body>
<div id="wrapper">
</div>
<!--Pay attention to the path-->
<script src="chimee-mobile-player.js" type="text/javascript" charset="utf-8"></script>
<script>
new ChimeeMobilePlayer({
wrapper: '#wrapper', // video dom container
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>
The file chimee-mobile-player.js is located in: https://github.com/Chimeejs/chimee-mobile-player/edit/master/lib/chimee-mobile-player.browser.js