Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
Когда мы с удовольствием смотрим фильмы онлайн,Неизбежно можно встретить видео в формате «M3U8». Если ты умный, ты тоже должен был это обнаружить,В нее нельзя играть напрямую. На самом деле это просто индексный файл,Найдите соответствующий файл .ts по нему и затем воспроизведите его. И преимущество этого,Вероятно, выполняется адаптация мультикодовой скорости.,Обеспечьте плавное воспроизведение видео。Заинтересованные друзья могут проверить здесь—>Формат файла M3U8。
Сегодня я хочу решить, как удобно играть после того, как мы найдем адрес M3U8~
Существует множество способов воспроизведения M3U8, например плагин для браузера Native HLS PlayBack:
Другой пример — готовый программный VLC-плеер:
но,Их необходимо скачать или установить.,Разве это не очень удобно, когда я меняю устройство? затем,Есть лучший способ:написатьСайт онлайн-игры M3U8。 Прямо над картинкой (ПК и мобильный соответственно):
Используйте библиотеку js videojs для анализа и воспроизведения видео m3u8. конкретный код,Вы можете перейти на сайт—>Посмотреть исходный код—>прямойcopy。 Нижеследующее в основном посвящено объяснению некоторых ключевых моментов, которые помогут избежать обходных путей.
Чтобы сайт хорошо отображался как на ПК, так и на мобильных терминалах, в HTML необходимо добавить следующий код:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
В то же время, чтобы лучше различать, является ли текущий доступ мобильным терминалом или терминалом ПК, можно определить следующую функцию JS:
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;
}
Измените адрес m3u8, который необходимо воспроизвести, добавив параметр воспроизведения к адресу запроса «http://www.m3u8player.top/?play=xxxx.m3u8». После нажатия кнопки выполните функцию ChangeM3u8(), чтобы реализовать переход на страницу:
function ChangeM3u8(){
var play = document.getElementById('video-url').value
var url = location.href
url = url.split('?')[0]+'?play='+play
location.href = url
}
Определите параметр воспроизведения в URL-адресе запроса:
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
}
При необходимости установите параметры videojs, такие как индикатор выполнения, плакат и т. д.:
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 Пожалуйста, проверьте правильность ссылки')
})
}
)
Чтобы веб-сайт мог управлять видео с помощью клавиш клавиатуры, таких как клавиши «влево» и «вправо» для управления видео вперед и назад, клавиши «вверх» и «вниз» для управления громкостью и пробел для управления воспроизведением и паузой видео. . Я добавил события прослушивания клавиатуры:
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