1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/cnbrucelee-videoUI

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 3.7 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 30.11.2024 17:45 9163c07

videoUI

HTML5 Video — одна из самых популярных функций HTML5, которая поддерживается большинством современных версий браузеров. Однако в разных браузерах предоставляются разные стили видео, и при доступе к ним из разных браузеров стили не унифицированы. Мы создали собственные видеоэлементы управления, чтобы обеспечить единый видеоэлемент во всех браузерах, независимый от стандартных элементов управления видео.

videoUI — это облегчённый элемент управления на стороне клиента, который обеспечивает единый стиль и работу в различных браузерах.

AUR

Демонстрация

demo0

Реализованные функции

  • воспроизведение/пауза видео;
  • длительность и текущий прогресс;
  • переключение чёткости;
  • скорость воспроизведения;
  • регулировка громкости;
  • полноэкранный режим веб-страницы;
  • полный экран;
  • воспроизведение «картинка в картинке»;
  • выбор языка;
  • быстрый переход с помощью клавиш со стрелками влево и вправо на клавиатуре;
  • регулирование громкости с помощью клавиш вверх и вниз на клавиатуре;
  • отображение значка загрузки во время загрузки;
  • всплывающие сообщения.

2021-06-06 обновление

  • пробел на клавиатуре для приостановки и воспроизведения.

Пример

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../media/images/favicon.ico" type="image/x-icon">
    <title>videoUI</title>
    <!-- 1、引入CSS -->
	<link href="../css/videoUI.css" rel="stylesheet"></head>
<body>
<div class="container">
    <!--2、video的容器 -->
    <div class="video-ui" style="width: 720px;height: 480px;margin: 10px auto"></div>
</div>
<!-- 3、引入JS -->
<script type="text/javascript" src="../js/videoUI.js"></script></body>
<script>
    //4、创建videoUI实例
    var vui = new VideoUI({//5、配置对象
        el: ".video-ui",
        qualityData: [{
            name: "4K",
            src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
            type: "video/mp4"
        }],
    });
</script>
</html>

Документация по поддержке GitHub

Документация по поддержке Gitee

Связанные ресурсы

Исходный код GitHub

Исходный код Gitee

Спасибо за вашу поддержку!

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/cnbrucelee-videoUI.git
git@api.gitlife.ru:oschina-mirror/cnbrucelee-videoUI.git
oschina-mirror
cnbrucelee-videoUI
cnbrucelee-videoUI
master