m3u8格式的视频链接怎么在自己电脑上播放

上篇文章提到,怎么到视频网站通过浏览器抓包分析,得到视频的源地址。看这篇文章之前,最好可以去先看一看上篇博文的介绍。

上篇文章我们介绍到我们能够得到视频的源地址,且它是一个m3u8格式的文件,现在我们想把它放到自己电脑上播放,或者说我们现在知道一个m3u8格式的视频地址,我们怎么在自己电脑上播放它。

方法一,下载浏览器插件,插件帮你完成
方法二,搭建一个前端基于HTML5页面的m3u8播放服务器

这里着重介绍第二种方法。

为啥要复制m3u8视频地址,到自己电脑上播放,这样有什么好处?
1. 电影网站一般有很多广告,影响体验,所以我们花一分钟解析到m3u8地址后,到自己的干净清爽页面上播放,对于强迫症患者友好
2. 闲的蛋疼

环境配置

1. Tomcat服务器,当然我们使用任何能访问html页面的服务器都行。
2. 使用ckplayer前端播放器插件帮助我们解析m3u8

Tomcat官网下载Tomcat服务器。
下载前端播放器插件 CKplayer

在Tomcat根目录下进入webapp目录,创建目录m3u8player

解压下载好的CKPlayer文件,并将解压目录中的ckplayer目录(如下图所示)复制到m3u8player目录下

在这里插入图片描述

前端播放器配置代码

在m3u8player目录下创建一个html文件:index.html,index.html内容如下

<!DOCTYPE>
<html>
<meta charset="utf-8">
<title>m3u8播放器</title>
<script type="text/javascript" src="./ckplayer/ckplayer.js"></script>
<style>*{margin: 0; padding: 0;}</style>
<body>
	<p>
		<span>请输入m3u8地址: </span>
		<input type="text" id="url"/>
		<button id="submit">观看</button>
	</p>
	
	<div id="video" style="width: 100%; height: 100%;"></div>
	
	<script type="text/javascript">
		
		
		var submit = document.getElementById("submit");
		var url = document.getElementById("url");
		
		var videoObject = {
			container:'#video', // 视频容器
			variable:'player',
			autoplay:true,
			video:'http://www.flashls.org/playlists/test_001/stream_1000k_48k_640x360.m3u8'
		}
		new ckplayer(videoObject);
		
		submit.addEventListener('click', function(){
			// 输入的地址不能跟当前播放的视频地址一样
			if(url.value != videoObject.video){
				videoObject.video = url.value;
				new ckplayer(videoObject);
			} else {
				alert("您目前播放就是该视频...");
			}
		});
	</script>
</body>
</html>

此html页面的界面大致样子如下:
最上边是一个文本框,我们复制可播放的m3u8地址到文本框中,然后点击观看即可自动播放
在这里插入图片描述

播放测试

再看到上篇文章:网页播放器(CKplayer)的视频怎么下载——m3u8简单探索

我们通过这篇文章解析到m3u8视频的地址为:https://v3.438vip.com/20180206/1J0oX5Ro/index.m3u8

  1. 保证Tomcat服务器启动tomcat/bin/startup.bat
  2. 浏览器访问http://localhost:8080/m3u8player/
  3. 输入框输入m3u8地址
  4. 点击观看即可
    在这里插入图片描述
  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值