原生js如何播放m3u8文件的视频,并且实现切换视频源

在网上找了很多方法都不行,最后还得是chatgpt。

首先呢在需要用到的文件中写入一下代码:

html 复制代码
<script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

外部链接,无需下载

然后再下一个video

html 复制代码
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered image_1" controls autoplay webkit-playsinline="true" playsinline="true" type="video/m3u8" data-setup='{}'>
    	<source class="sdfhg" id="source" src="xxxxx.m3u8" type="application/x-mpegURL">
</video>

现在是只要链接可以用就可以直接自动播放的

下面是切换视频源的方法

javascript 复制代码
        function play(i) {
				var myVideo = videojs('myVideo')
				myVideo.pause() // 视频暂停
				myVideo.currentSrc('');
				myVideo.src({  
				    type: 'application/x-mpegURL', // 或 'video/mp2t' 对于某些浏览器/服务器配置  
				    src: video_data[i].video_url // 新的 m3u8 URL  
				});  
				myVideo.load();  
				myVideo.on('loadedmetadata', function() {  
				    // 可以在这里继续播放或更新 UI  
				    myVideo.play();  
				});  
				  
				myVideo.on('error', function(event, error) {  
				    // 处理错误  
				    console.error('An error occurred:', error);  
				});
			}

拿走拿走!,不用谢!

相关推荐
aricvvang几秒前
🚀 NestJS 使用 cache-manager-redis-store 缓存无效?真相在这里!
javascript·后端·nestjs
皮皮虾我们跑2 分钟前
前端HTML常用基础标
前端·javascript·html
Yeats_Liao2 分钟前
Go Web 编程快速入门 01 - 环境准备与第一个 Web 应用
开发语言·前端·golang
卓码软件测评3 分钟前
第三方CMA软件测试机构:页面JavaScript动态渲染生成内容对网站SEO的影响
开发语言·前端·javascript·ecmascript
Mintopia6 分钟前
📚 Next.js 分页 & 模糊搜索:在无限数据海里优雅地翻页
前端·javascript·全栈
Mintopia7 分钟前
⚖️ AIGC版权确权技术:Web内容的AI生成标识与法律适配
前端·javascript·aigc
*才华有限公司*7 分钟前
《爬虫进阶之路:从模拟浏览器到破解动态加载的实战指南》
开发语言·python
周家大小姐.18 分钟前
vue实现模拟deepseekAI功能
前端·javascript·vue.js
敲代码的嘎仔27 分钟前
JavaWeb零基础学习Day4——Maven
java·开发语言·学习·算法·maven·javaweb·学习方法
W.Buffer34 分钟前
设计模式-工厂模式:解耦对象创建的设计艺术
java·开发语言·设计模式