M3U8在线播放

M3U8在线播放M3U8在线播放前言一、思路二、代码框架1.移动端适配2.改变M3U8地址3.设置videojs参数4.增加快进等功能写在最后前言当我们在网上愉快观影的时候,难免会遇到“M3U8格式”的视频。聪明的你应该也发现了,它是没办法直接播放的。它其实只是一个索引文件,根据它找到相应的.ts文件再进行播放。而这样做的好处,大概就是做多码率适配,保证视频播放的流畅性。有感兴趣的小伙伴可以参看这里—>M3U8文件格式。我今天要干的事情呢,就是解决当我们找到一个M3U8地址之后如何方便的播放它~一

大家好,又见面了,我是你们的朋友全栈君。

前言

当我们在网上愉快观影的时候,难免会遇到“M3U8格式”的视频。聪明的你应该也发现了,它是没办法直接播放的。它其实只是一个索引文件,根据它找到相应的.ts文件再进行播放。而这样做的好处,大概就是做多码率适配,保证视频播放的流畅性。有感兴趣的小伙伴可以参看这里—>M3U8文件格式

我今天要干的事情呢,就是解决当我们找到一个M3U8地址之后如何方便的播放它~

一、思路

想要播放M3U8的方法有很多,比如浏览器插件 Native HLS PlayBack:
在这里插入图片描述
又比如现成的软件VLC播放器:
在这里插入图片描述
但是,这些都需要下载或者安装,当我换一个设备时就不是很方便嘛。于是,还有一种更好的方法:写一个M3U8在线播放的网站
直接上图(分别为PC端和移动端):
M3U8在线播放网站-PC端
在这里插入图片描述

二、代码框架

利用js库videojs来对m3u8视频进行解析并播放。具体的代码,大家可以进去网站—>查看源码—>直接copy。
接下来主要是对其中涉及到的一些关键点进行说明,避免大家走弯路。

1. 移动端适配

为了使得网站在PC端和移动端都能很好地被展示,得在HTML中加入如下代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

同时为了更好地区分出当前访问是移动端还是PC端,可以定义如下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;
}

2. 改变M3U8地址

通过在请求地址中加入一个play参数,“http://www.m3u8player.top/?play=xxxx.m3u8”来改变需要播放的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中的play参数:

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. 设置videojs参数

根据需要对videojs参数进行设置,如进度条、poster等:

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. 增加快进等功能

为了使得网站可以通过键盘按键来对视频进行控制,如左右键控制视频前进后退,上下键控制音量大小,空格键控制视频播放暂停。我增加了键盘监听事件:

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;
}
}

写在最后

当然,还有许多东西可以做,可以去改进的。
所谓的“路遥遥其修远兮 吾将上下而求索”。

最后,感谢各位大大的耐心阅读~
慢着,大侠请留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147766.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • PHP审计之class_exists与任意实例化漏洞

    PHP审计之class_exists与任意实例化漏洞前言发现PHP的一些漏洞函数挺有意思,跟着七月火师傅的文章来学习.class_exists函数函数说明class_exists:(PHP

    2021年12月13日
  • Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)

    Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921,本文出自:【张鸿洋的博客】1、概述之前写过一篇博文:Android自定义ViewPager打造千变万化的图片切换效果。有兄弟提出,ViewPager自带了一个setPageTransformer用于设置切换动画~本篇博文,将:1、介绍如何使用setPageTr

  • python安装numpy后pycharm导入不了_如何导入numpy

    python安装numpy后pycharm导入不了_如何导入numpypycharm安装好后numpy的导入pipinstallnumpy使用pip命令在dos环境下出现平台不支持,python版本太高,numpy不匹配,刚开始下的3.7的最新版,重新下载3.6的版本,安装成功。python安装的时候自己选择路径,勾选自动配置环境变量,默认安装路径在一个隐藏的文件夹temp里面,临时文件,容易系统清除。配置项目解释器,将py

  • hibernate二级缓存配置[通俗易懂]

    hibernate二级缓存配置[通俗易懂] 二级缓存配置:    1、首先要打开二级缓存,在hibernate.cfg.xml中添加如下配置:  property name=”hibernate.cache.use_second_level_cache”>trueproperty>    2、Hibernate的二级缓存使用第三方的缓存工具来实现,所以我们需要指定Hibernate使用哪个     缓存工

  • Vue3不支持Filters过滤器

    Vue3不支持Filters过滤器filters过滤器已从Vue3.0中删除,不再支持。2.x语法在2.x中,开发人员可以使用过滤器来处理常见的文本格式。<template><h1>BankAccountBalance</h1><p>{{accountBalance|currencyUSD}}</p></template><script>exportdefault{props:{a.

  • 国内DNS推荐_年度优秀员工测评表

    国内DNS推荐_年度优秀员工测评表DNS在平时上网中扮演重要角色,如果不注意DNS的话,可能会导致网速慢、弹窗广告、网址打不开、打开不是自己想要的网站、劫持等一系列问题。针对DNS的问题,今天我们就来总结一下,看看哪个DNS服务器最好用!注意:本测试仅通过奇云测对服务器进行综合测试,具体使用情况请以用户本地为主。建议使用ISP默认分配的DNS,只有在特别需要的情况下再使用公共DNS。1.PublicDNS+:★★★★★(推荐…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号