A cute HTML5 video player that can send bullet screens (in Chinese,弹幕).
You can see demo here.
YangPlayer.js was written in pure ECMAScript 6 without JQuery and was based on HTML5 video API. Source code was transpiled into ECMAScript 5 by Babel and took advantage of es6-shim to polyfill API of ECMAScript 6.
- support sending bullet screens, containing colorful、different-sized、top and moving bullet screens
- support turn-off-light watching
- support change playback rate
- support Chinese and English
- Chrome 48+
- Firefox 44+
- Safari 10+
- Opera 43+
<!-- ... -->
<head>
<!-- ... -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Required -->
<link rel="stylesheet" href="css/YangPlayer.min.css"> <!-- Required -->
</head>
<body>
<div class="YangPlayer-container"></div> <!-- Required -->
<script src="js/YangPlayer.min.js"></script> <!-- Required -->
<script>
// initial setting
let yangPlayer = new YangPlayer({
language: 'en', // optional, the language mode video player uses, `zh` or `en`, default: `zh`
bulletScreen: {
bulletSwitch: true, // optional, specify if open bullet screen functionality, `true` or `false`, default: `false`
url: 'bulletScreen.php' // the ajax address sent to, default: ''. If `switch` is `true`, this option is required
},
autoplay: false, // optional, specify if autoplay video at the beginning, `true` or `false`, default: `false`
video: {
url: 'apple.mp4', // required, the video source url
posterUrl: '' // optional, the beginning poster url, default: ''
}
});
</script>
</body>
If you neeed to open bullet screen functionality, see PHP support.