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

拿走拿走!,不用谢!

相关推荐
艾小码1 天前
前端路由的秘密:手写一个迷你路由,看懂Hash和History的较量
前端·javascript
扶尔魔ocy1 天前
【QT常用技术讲解】opencv实现摄像头图像检测并裁剪物体
开发语言·qt·opencv
偷光1 天前
浏览器中的隐藏IDE: Elements (元素) 面板
开发语言·前端·ide·php
DKPT1 天前
JVM栈溢出和堆溢出哪个先满?
java·开发语言·jvm·笔记·学习
gopyer1 天前
180课时吃透Go语言游戏后端开发6:Go语言的循环语句
开发语言·游戏·golang·循环语句
千码君20161 天前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
楼田莉子1 天前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝1 天前
Vue总结
前端·javascript·vue.js
木易 士心1 天前
Promise深度解析:前端异步编程的核心
前端·javascript
韩立学长1 天前
【开题答辩实录分享】以《基于python的奶茶店分布数据分析与可视化》为例进行答辩实录分享
开发语言·python·数据分析