原生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);  
				});
			}

拿走拿走!,不用谢!

相关推荐
纪元A梦15 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
钢铁男儿17 分钟前
C# 深入理解类:面向对象编程的核心数据结构
开发语言·数据结构·c#
会飞的鱼先生17 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了18 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
Doker 多克43 分钟前
Python-Django系列—部件
开发语言·python
海底火旺44 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺44 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码1 小时前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
江沉晚呤时1 小时前
深入解析 ASP.NET Core 中的 ResourceFilter
开发语言·c#·.net·lucene
huangyuchi.1 小时前
【C++11】Lambda表达式
开发语言·c++·笔记·c++11·lambda·lambda表达式·捕捉列表