YangPlayer

an html5 video player

View project on GitHub

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号