Слияние кода завершено, страница обновится автоматически
AVideo.js: разработка версии
AVideo.js — это видеоплеер, который поддерживает высокую степень настройки и прост в использовании. Он может широко использоваться на различных основных ПК-устройствах. Поддержка мобильных устройств ещё не реализована, поэтому необходимо проявить терпение и дождаться совместимости.
Исходный код AVideo.js полностью написан на Typescript и строго соответствует стандартам кодирования. Для разработки страницы используется шаблонизатор Pug. В будущем на основе Pug будет написано больше шаблонов страниц, и пользователи смогут выбирать различные шаблоны или создавать собственные! CSS написан с использованием Less, а исходный код скомпилирован с помощью WebPack.
AVideo.js не зависит от JQuery, использует Typescript, а затем компилируется в Js. Это обеспечивает чистоту и простоту использования в собственных проектах и возможность комбинирования с третьими сторонами без какого-либо вмешательства или помех.
Разработка AVideo.js ведётся в качестве хобби, поэтому обновление исходного кода может происходить не так быстро. Однако разработчики стремятся добавлять по 3–4 функции каждый день. О проблемах можно сообщить через Issues.
Функции
Реализованные:
В разработке:
Планируемые:
Использование
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AVideo.min.js</title>
<!-- Разработка: шрифт -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1980004_lnqny5kta9g.css">
<link href="AVideo.min.css" rel="stylesheet">
</head>
<body>
<script src="AVideo.min.js"></script>
</body>
</html>
<div id="app"></div>
new AVideo({
el: '#app', // Передаём родительский тег
url: 'http://video.geekhelp.cn/vue33', // Адрес видео для воспроизведения
title: 'Тестовый заголовок видео',
width: '60%', // Высота проигрывателя
height: '600px', // Ширина проигрывателя
autoplay: false, // Автоматическое воспроизведение
muted: false, // Включать ли звук (true — выключен, false — включён)
// Необходимые элементы управления устанавливаются в true, ненужные — в false или не указываются
controls: {
speed: true, // Воспроизведение с удвоенной скоростью
rotate: true, // Нужна кнопка поворота видео
image: true, // Нужна кнопка зеркального отображения видео
play: true, // Нужна кнопка воспроизведения видео
loop: true, // Нужно ли зацикливать видео
PictureInPicture: true, // Нужно ли включать режим «картинка в картинке»
ScreenShot: true // Нужна ли кнопка создания скриншота
},
finish: (video) => {
console.log("Видео воспроизведено:", video)
},
// Список воспроизведения
playList: [
{ title: 'Видео из списка воспроизведения 1', url: '' },
{ title: 'Видео из списка воспроизведения 2', url: '' },
{ title: 'Видео из списка воспроизведения 3', url: '' }
],
// Изображение для предварительного просмотра
poster: 'http://5b0988e595225.cdn.sohucs.com/images/20190705/52ea928741394f959974ec4e34860bcf.jpeg'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.vip_join {
color: #61bd12;
}
</style>
<link href="AVideo.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="AVideo.min.js"></script>
</body>
<script>
new AVideo({
el: '#app',
url: 'http://video.geekhelp.cn/vue33',
title: 'Заголовок тестового видео',
width: '60%', // Высота проигрывателя
height: '600px', // Ширина проигрывателя
autoplay: false, // Автоматическое воспроизведение
muted: false, // Включать ли звук (true — выключен, false — включён)
controls: {
speed: true, // Воспроизведение с удвоенной скоростью
rotate: true, // Нужна кнопка поворота видео
image: true, // Нужна кнопка зеркального отображения видео
play: true, // Нужна кнопка воспроизведения видео
loop: true, // Нужно ли зациклить видео
PictureInPicture: true, // Включить режим «картинка в картинке»
ScreenShot: true // Создать скриншот видео
},
finish: (video) => {
console.log("Воспроизведено видео:", video)
},
// Список воспроизведения
playList: [
{ title: 'Видео из списка воспроизведения 1', url: '' },
{ title: 'Видео из списка воспроизведения 2',
url: '' }
]
});
</script>
``` ## 4：Параметры
**Вы не ошиблись! Подробное описание параметров ещё не успели написать, один человек не справляется со всем объёмом работы!**
**Позже добавим документацию...**
## 5：Использование после компиляции
Поскольку вы используете `AVideo.min.js` и `AVideo.min.css`, возможно, это не последняя версия. Вы можете скачать исходный код, скомпилировать и упаковать новую версию исходного кода и использовать её!
**Скачать:**
```bash
git clone https://gitee.com/bmycode/AVideo.git
Инициализировать:
npm install
Упаковать AVideo.min.js и AVideo.min.css:
npm run build
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )