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)


相关推荐

  • 数据结构的堆排序_数据结构冒泡排序算法

    数据结构的堆排序_数据结构冒泡排序算法一、什么是堆排序1.堆,堆排序对于“堆”我们可以理解为具有以下性质的完全二叉树:每个结点的值都大于或等于其左右孩子结点的值,称为大顶堆每个结点的值都小于或等于其左右孩子结点的值,称为小顶堆堆

  • vue富文本编辑器插件推荐_elementui富文本编辑器

    vue富文本编辑器插件推荐_elementui富文本编辑器富文本编辑器官网http://tinymce.ax-z.cn安装npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S下载语言包语言包下载完之后在项目里新建public文件夹1)在public目录下新建tinymce文件夹,并将下载的语言包解压到该目录下2)在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面<template><divclass

    2022年10月15日
  • 经典中的经典算法:动态规划(详细解释,从入门到实践,逐步讲解)

    经典中的经典算法:动态规划(详细解释,从入门到实践,逐步讲解)首先,本博客为原创作品,欢迎指导,随意转载,如果可以请转载时说明出处,附上本文链接,谢谢动态规划的重要性就不多说,直接进入正题首先,我们看一下官方定义:定义:动态规划算法是通过拆分问题,定义问题状态和状态之间的关系,使得问题能够以递推(或者说分治)的方式去解决。动态规划算法的基本思想与分治法类似,也是将待求解的问题分解为若干个子问题(阶段),按顺序求解子阶段,前一子问题的解,为后一子问题…

  • 网购冷门产品有哪些_淘宝比较冷门的商品

    网购冷门产品有哪些_淘宝比较冷门的商品sharonshen ,熠仔6149人赞同1. 小白鞋纳米喷雾!!!这个真是绝了,本人就是穿小白鞋一周就会穿成小脏鞋的那种,有了这个在新鞋的时候全方位喷一下,真的就再也不会脏了耶!其实呢,当年买它,是宝宝在法国的时候,去北欧玩,穿的雪地靴,踩在雪里,雪都能化进鞋里(顺便吐槽下,雪地靴真的不适合在雪地里面行走!!!),所以买了下面的这个喷雾,防水,后来惊讶的发现,

  • java栈的实现_java技术栈

    java栈的实现_java技术栈一.数组实现的栈,能存储任意类型的数据。/***java使用数组来实现栈,能存储任意数据**@authorLinging*@date2019/2/10**/importjava.lang.reflect.Array;publicclassArrayStack&amp;lt;T&amp;gt;{ privatefinalstaticintDEFA…

  • docker 容器内部访问宿主机_docker访问宿主机文件

    docker 容器内部访问宿主机_docker访问宿主机文件在使用Docker部署应用时,Docker推荐的方式是将应用及其所依赖的服务(MySQL,Redis等)均使用Docker部署,并通过link或自定义网络相连接。但是,当应用所依赖的服务被安装在宿主机上时,我们需要让容器中的应用能够访问到部署在宿主机上的服务。本文将介绍实现这一目的的几种方案,并分析其优缺点。首先我们需要了解一些关于Docker网络的基础知识。Docker网络Docker提供…

发表回复

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

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