A simple and easy-to-use JS video player, which perfectly solves the needs of playing videos on mobile terminals that I have encountered. Amway gives you all.
About Tiny Player
Tiny Player is a minimalist video player JS library with built-in hard and soft video functions, supports native control styles and custom control styles, and realizes all video playback functions in a compact size.
Tiny Player JS video player technical features
- Good compatibility: no other dependencies, any framework and browser can be used, support for mobile use
- Multi-format support, support streaming playback: not only supports mp4, webm, ogg and other common video formats, but also supports m3u8, supports automatic switching
- Pluggable control bar: support custom control bar, mount the control bar to the target node, support custom control bar components to display and hide.
- Support specified video clip playback: play by specifying clips by entering parameters, similar to cropping
- Lightweight: only 25KB in size, only 7KB after gzip compression
- "wip" software solution: support audio and video software solutions, support custom decoders, and solve compatibility problems with various browsers (under development)
Develop hands-on experience
In order to realize the video playback function in web development, if you use a native video player, the compatibility is often not good, and the video control style is relatively basic and not easy to use. At this time, you need an easy-to-use video player. I also recommended the xgplayer.js watermelon player before , although it is easy to use, but it is bloated, and the Tiny Player recommended today is very small.
We can install it in three ways:
Then use in your project:
Traditional development can also directly introduce tags, and then initialize:
The tiny-player.min.js file can be obtained by downloading the Github project. As you can see from the above few lines of sample code, it is very simple to use.
TinyPlayer supports MSE (Media Source Extensions), which is an HTML5 specification that allows our JavaScript to control the buffer of the media stream so that it can be played seamlessly.
Currently also supports HLS (HTTP Live Streaming), which is Apple's dynamic bit rate adaptive technology. It is mainly used for audio and video services of PC and Apple terminals. It includes an index file in m3u(8) format, which records an index plain text file. When you open it, the playback software does not play it, but finds the network address of the corresponding audio and video file according to its index for online playback. Playing videos this way is very common.
More parameter usage can be read in the documentation, and the official website also provides sufficient code examples, which is very simple to integrate into the project. However, according to my experience, the official website is estimated to be hung on Github, and the access is not very stable, and occasionally requires tool support to open it.
Free Open Source Instructions
TinyPlayer is a free and open source JavaScript video player project. The source code is hosted on Github, and anyone can download and use it for free. However, the main page of the Github warehouse does not clearly indicate the adoption of the MIT open source license , but it can only be seen in the footer of the official website. In short, you can use it with confidence.
Original link: https://www.thosefree.com/tiny-player-js