snail-player-native

H5-плеер для воспроизведения видео, написанный чистым нативным кодом, с полной функциональностью, базовым набором функций и возможностями обучения. Используйте только для образовательных целей, коммерческое использование запрещено.

issues forks stars

Установка

1. git clone https://github.com/snail-boy/snail-player-native.git
2. Копировать файлы из папки lib в свой проект

Использование

Просто запустите index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Заголовок</title>
  <style>
    #snailPlayId {
      width: 800px;
      height: 500px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>snail-player</h1>
<div id='snailPlayId'></div>

</body>
<script type="module">
  import SnailPlayer from "./lib/index.js";
  new SnailPlayer({
    el: '#snailPlayId',
    src: 'https://webrabbit.oss-cn-beijing.aliyuncs.com/drawingbed/video.mp4',
    autoplay: true, // Автоматическое воспроизведение
    loop: true // Циклическое воспроизведение
  });
</script>
</html>

Некоторый код

main.js

// Вычисление времени прогресс-бара
progressTime(offsetY) {
  return utils.formatSeconds((offsetY / this.progressw * this.playVideo.duration).toFixed(2));
}
```// Формула вычисления прогресс-бара
progressCalculate() {
  return (this.progressw / this.playVideo.duration * this.playVideo.currentTime).toFixed(2);
}
```<!-- Полный экран -->
fullScreenFun() {
  const docElm = document.documentElement;
  if (!this.isFullScreen) {
    utils.addClass(this.el, 'fullscreen-active');
    utils.addClass(this.playVideo, 'fullscreen-active');
    utils.showClass('snail-player-full-screen-icon');
    utils.hiddenClass('snail-player-fullscreen-btn');
    utils.changeInnerText('fullscreen-icon', 'Выход с полного экрана');
    utils.addClass(this.playBottom, 'sn-player-fullscreen-bottom-active');
    setTimeout(() => {
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      } else if (document.webkitRequestFullscreen) {
        docElm.webkitRequestFullscreen();
      }
    }, 100);
    this.isFullScreen = true;
    utils.hiddenClass('snail-player-web-fullscreen-box');
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullscreen) {
      document.webkitCancelFullscreen();
    }
    utils.showClass('snail-player-web-fullscreen-box');
    utils.removeClass(this.el, 'fullscreen-active');
    utils.removeClass(this.playVideo, 'fullscreen-active');
    utils.hiddenClass('snail-player-full-screen-icon');
    utils.showClass('snail-player-fullscreen-btn');
    utils.changeInnerText('fullscreen-icon', 'Перейти в полноэкранный режим');
    utils.removeClass(this.playBottom, 'sn-player-fullscreen-bottom-active');
    this.isFullScreen = false;
  }
}

index.js

// Загрузка CSS
renderCss(url) {
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = url;
  head.appendChild(link);
}

// Загрузка favicon
renderIcon(url) {
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type = 'type="image/x-icon"';
  link.rel = 'shortcut icon';
  link.href = url;
  head.appendChild(link);
}
```<h3>Утилиты</h3>

```js

class Utils {
  hasClass(ele, cls) {
    return !!ele.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
  }
  addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += ' ' + cls;
  }
  removeClass(ele, cls) {
    if (this.hasClass(ele, cls)) {
      const reg = new RegExp('(\s|^)' + cls + '(\s|$)');
      ele.className = ele.className.replace(reg, '');
    }
  }
  set(key, value) {
    localStorage.setItem(key, value);
  }

  get(key) {
    return localStorage.getItem(key);
  }
  showClass(cls) {
    cls ? document.getElementsByClassName(cls)[0].style.display = 'block' : new Error('Введите имя класса');
  }
  hideClass(cls) {
    cls ? document.getElementsByClassName(cls)[0].style.display = 'none' : new Error('Введите имя класса');
  }
  changeInnerText(cls, text) {
    document.getElementsByClassName(cls)[0].innerHTML = text;
  }

  clickFu(to, cls) {
    // Функция обратного вызова, to — объект клика
    to.setAttribute("class", cls);
    const siblings = to.parentNode.childNodes;
    for (let i = 0; i < siblings.length; i++) 
      if (siblings[i].nodeType === 1 && siblings[i] !== to) siblings[i].className = '';
  }

  formatSeconds(value) {
    if (!value) return '00:00';
    value = parseInt(value);
    let time;
    if (value > -1) {
      let hour = Math.floor(value / 3600);
      let min = Math.floor(value / 60) % 60;
      let sec = value % 60;
      let day = parseInt(hour / 24);
      if (day > 0) {
        hour = hour - 24 * day;
        time = day + ' дней ' + hour + ':';
      } else if (hour > 0) {
        time = hour + ':';
      } else {
        time = '';
      }
      if (min < 10) {
        time += '0';
      }
      time += min + ':';
      if (sec < 10) {
        time += '0';
      }
      time += sec;
    }
    return time;
  }
}

``````markdown
## Класс Utils

```javascript
class Utils {
  static getClassElement(cls) {
    return cls && document.getElementsByClassName(cls)[0];
  }
}

export default Utils;

Функциональность- Нажмите пробел для приостановки воспроизведения

Щелкните по экрану для приостановки воспроизведения
Управление прогрессом видео с цветовой маркировкой
Отображение времени при наведении указателя мыши на полосу прогресса
Ускорение/замедление воспроизведения видео
Управление громкостью звука видео
Видео в виде вложения
Полноэкранный режим
Двойной щелчок для перехода в полноэкранный режим
И многое другое


## Операционная среда

Поддерживает все браузеры, поддерживающие ES6.

Рекомендуется использовать Google Chrome.


## Исходный код доступен, присоединяйтесь!

[GitHub адрес](https://github.com/snail-boy/snail-player-native)

[Gitee адрес](https://gitee.com/snailwebboy/snail-player-native)

## Оставьте свои отзывы и предложения

[Issues](https://github.com/snail-boy/snail-player-native/issues)

OSCHINA-MIRROR/snailwebboy-snail-player-native

snail-player-native

Установка

Использование

Некоторый код

main.js

index.js

Функциональность- Нажмите пробел для приостановки воспроизведения

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/snailwebboy-snail-player-native .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

snail-player-native

Установка

Использование

Некоторый код

main.js

index.js

Функциональность- Нажмите пробел для приостановки воспроизведения

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/snailwebboy-snail-player-native