Skip to content
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
test
.babelrc
.bowerrc
.eslintrc.js
.gitignore
CNAME
LICENSE
README.md
_config.yml
bower.json
gulpfile.js
package.json
phpSupport.md
player.png

README.md

YangPlayer

A cute HTML5 video player that can send bullet screens (in Chinese,弹幕).

You can see demo here.

Screenshot

YangPlayer screenshot

Overview

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.

Features

  • 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

Browser support

  • Chrome 48+
  • Firefox 44+
  • Safari 10+
  • Opera 43+

Getting started

<!-- ... -->
<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.

License

粤ICP备15088974号

You can’t perform that action at this time.