A powerful web video playback component that conforms to the domestic video playback business, officially produced by the Watermelon Video Technology Team.
About Watermelon Player
Watermelon Player (xgplayer.js) is not a movie watching software, but a video player class library for web development. It is also an independent UI component used to realize the function of playing videos on web pages. It not only has flexible performance at the UI layer, but also integrates on-demand and live support for flv, hls, and dash, especially in mp4 on-demand, so that videos in mp4 format that do not support streaming can be loaded in sections without the need for The conversion format realizes seamless switching of resolution, loading control, saving video traffic, and saving server overhead.
Most of ByteDance's video business is short video. In the early days, the development team did secondary development on the basis of video.js. Later, it was found that many functions could not meet the requirements, such as custom UI, seamless switching of video clarity, high video traffic overhead, etc., and decided to develop a web player that meets business requirements from the bottom layer, and launched a stable version in early 2018. , developed so far, it has powerful functions, excellent performance, and has a complete video playback API. It not only supports web video services such as Xigua Video, Douyin, and Toutiao, but is also used by more than 200 products from many domestic manufacturers to support video services. An excellent HTML5 video player.
Technical characteristics
- Parse videos in MP4, HLS, FLV format from the bottom layer, and have a wider range of video playback usage scenarios
- Flexible plug-in system, PC / mobile terminal automatic switching security whitelist mechanism
- Powerful MP4 video playback control, seamless switching on demand, and significant bandwidth savings
- Has a complete product mechanism, error monitoring and reporting and automatic downgrade processing
Develop hands-on experience and usage suggestions
The installation and use of xgplayer.js is very simple. It supports npm installation and cdn introduction of js. The use is also very simple. You only need to provide a placeholder DOM to instantiate it. The official website provides comprehensive and easy-to-understand development documents and code examples.
xgplayer.js has comprehensive support for web video playback. Even the functions that are difficult to solve in video development, such as ios screen projection, WeChat same-layer playback, and WeChat full-screen playback, can be easily configured and implemented. The official also provides various video playback related functions. The plug-ins of , and the video-related development needs encountered by visual inspection can almost help us solve them.
For functions that may only be used in a small part, xgplayer.js provides a simple version and only introduces the playback core, which can greatly reduce the packaging size.
In order to improve development efficiency and development experience, the official website also provides a visual code generator.
xgplayer.js can also be used to play audio, and a simple configuration can make a music player with visual waveform and lyrics synchronization.
In terms of compatibility, xgplayer.js supports direct playback of MP4 videos:
- Playing HLS, FLV, MPEG-DASH on the PC side requires the browser to support Media Source Extensions
- iOS supports direct playback of mp4 and HLS
- Android supports direct playback of mp4 and HLS, and playback of FLV and MPEG-DASH requires a browser to support Media Source Extensions
Free Open Source Instructions
Watermelon Player (xgplayer.js) is a free and open source HTML5 audio and video playback component produced by the ByteDance development team. Based on the MIT open source agreement , any individual and company can use it for their own projects for free. The only requirement is that the default authorization will be used. The logo of the business where the watermelon player is located is displayed on the official website.
Original link: https://www.thosefree.com/xgplayer-js