M3U8 онлайн-игра
M3U8 онлайн-игра

Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.

M3U8 онлайн-игра

Предисловие

Когда мы с удовольствием смотрим фильмы онлайн,Неизбежно можно встретить видео в формате «M3U8». Если ты умный, ты тоже должен был это обнаружить,В нее нельзя играть напрямую. На самом деле это просто индексный файл,Найдите соответствующий файл .ts по нему и затем воспроизведите его. И преимущество этого,Вероятно, выполняется адаптация мультикодовой скорости.,Обеспечьте плавное воспроизведение видео。Заинтересованные друзья могут проверить здесь—>Формат файла M3U8

Сегодня я хочу решить, как удобно играть после того, как мы найдем адрес M3U8~

1. Идеи

Существует множество способов воспроизведения M3U8, например плагин для браузера Native HLS PlayBack:

Другой пример — готовый программный VLC-плеер:

но,Их необходимо скачать или установить.,Разве это не очень удобно, когда я меняю устройство? затем,Есть лучший способ:написатьСайт онлайн-игры M3U8。 Прямо над картинкой (ПК и мобильный соответственно):

2. Структура кода

Используйте библиотеку js videojs для анализа и воспроизведения видео m3u8. конкретный код,Вы можете перейти на сайт—>Посмотреть исходный код—>прямойcopy。 Нижеследующее в основном посвящено объяснению некоторых ключевых моментов, которые помогут избежать обходных путей.

1. Адаптация мобильного терминала

Чтобы сайт хорошо отображался как на ПК, так и на мобильных терминалах, в HTML необходимо добавить следующий код:

Язык кода:javascript
копировать
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

В то же время, чтобы лучше различать, является ли текущий доступ мобильным терминалом или терминалом ПК, можно определить следующую функцию JS:

Язык кода:javascript
копировать
function IsPC(){ 
   
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) { 
   
        if (userAgentInfo.indexOf(Agents[v]) > 0) { 
   
            flag = false;
            break;
        }
    }
    return flag;
}

2. Измените адрес M3U8.

Измените адрес m3u8, который необходимо воспроизвести, добавив параметр воспроизведения к адресу запроса «http://www.m3u8player.top/?play=xxxx.m3u8». После нажатия кнопки выполните функцию ChangeM3u8(), чтобы реализовать переход на страницу:

Язык кода:javascript
копировать
function ChangeM3u8(){ 
   
    var play = document.getElementById('video-url').value
    var url = location.href
    url = url.split('?')[0]+'?play='+play
    location.href = url
}

Определите параметр воспроизведения в URL-адресе запроса:

Язык кода:javascript
копировать
function QueryString(qs){ 
   
    var url = location.href
    url = url.replace('?','?&').split('&')
    var re = ''
    for(var i=1;i < url.length;i++){ 
   
        if(url[i].indexOf(qs+'=')==0){ 
   
            re = url[i].replace(qs+'=','')
            break
        }
    }
    return re
}

3. Установите параметры видеоjs.

При необходимости установите параметры videojs, такие как индикатор выполнения, плакат и т. д.:

Язык кода:javascript
копировать
var myVideo = videojs('myVideo',{ 
   
    bigPlayButton : true, 
    textTrackDisplay : false, 
    posterImage: false,
    errorDisplay : true,
    controlBar: { 
   volumePanel:{ 
   inline:false}},
    playbackRates: [0.5,1,1.25,1.5,2],
},function(){ 
   
    this.on('error',function(){ 
   
        myVideo.errorDisplay.close()
        alert('Мастер, ошибка разрешения адреса≥﹏≤ \n Пожалуйста, проверьте правильность ссылки')
    }) 
}
)

4. Добавьте перемотку вперед и другие функции.

Чтобы веб-сайт мог управлять видео с помощью клавиш клавиатуры, таких как клавиши «влево» и «вправо» для управления видео вперед и назад, клавиши «вверх» и «вниз» для управления громкостью и пробел для управления воспроизведением и паузой видео. . Я добавил события прослушивания клавиатуры:

Язык кода:javascript
копировать
var vol = 0.1;  //1 представляет 100% объема, каждый раз увеличиваясь или уменьшаясь на 0,1.
var time = 10; //Единица секунды, каждый раз увеличивается или уменьшается на 10 секунд
document.onkeyup = function (event) { 
   //События клавиатуры
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode === 37) { 
   
        // в соответствии с левый ключ
        c_time = myVideo.currentTime()
        if(c_time-time > 0){ 
   
            myVideo.currentTime(c_time-time)
        }else{ 
   
            myVideo.currentTime(0)
        }
        return false;
    }else if (e && e.keyCode === 39) { 
   
        // в соответствии с правая клавиша
        c_time = myVideo.currentTime()
        d_time = myVideo.duration();
        if(c_time+time > d_time){ 
   
            myVideo.currentTime(d_time)
        }else{ 
   
            myVideo.currentTime(c_time+time)
        }
        return false;
    }else if (e && e.keyCode === 38) { 
   
        // в соответствии с клавиша вверх
        c_volume = myVideo.volume()
        if(c_volume+vol > 1){ 
   
            myVideo.volume(1)
        }else{ 
   
            myVideo.volume(c_volume+vol)
        }
        return false;
    }else if (e && e.keyCode === 40) { 
   
        // в соответствии с стрелка вниз
        c_volume = myVideo.volume()
        if(c_volume-vol < 0){ 
   
            myVideo.volume(0)
        }else{ 
   
            myVideo.volume(c_volume-vol)
        }
        return false;
    }else if (e && e.keyCode === 32) { 
   
        // в соответствии с пробел
        if (myVideo.paused()){ 
   
            myVideo.play()
        }else{ 
   
            myVideo.pause()
        }
        return false;
    }

}

напиши в конце

Конечно, есть еще много вещей, которые можно сделать и улучшить. Как говорится: «Дорога далека и дорога далека. Буду искать вдоль и поперёк».

Наконец, спасибо за ваше терпение при чтении~ Подождите, герои, пожалуйста, оставайтесь... Пошевелите своими милыми руками, поставьте мне лайк и уходите. (๑◕ܫ←๑)

Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/147766.html Исходная ссылка: https://javaforall.cn

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose