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

拿走拿走!,不用谢!

相关推荐
ElasticPDF-新国产PDF编辑器几秒前
Angular 项目使用 pdf.js 及批注插件Elasticpdf 教程
javascript·pdf·angular.js
難釋懷3 分钟前
JavaScript基础-window.localStorage
开发语言·javascript
无名之逆5 分钟前
探索轻量高性能的 Rust HTTP 服务器框架 —— Hyperlane
服务器·开发语言·windows·后端·http·rust
望舒_2336 分钟前
【C++11】异步编程
开发语言·c++
一个程序员(●—●)12 分钟前
Lua函数与表+Lua子文件加载与元表
开发语言·lua
zyx没烦恼13 分钟前
Linux 进程信号
linux·运维·服务器·开发语言·c++
Eugene__Chen20 分钟前
JavaWeb开发基础知识-XML和JSON
java·开发语言·前端
努力学习的小廉33 分钟前
【C++11(上)】—— 我与C++的不解之缘(三十)
java·开发语言·c++
霍珵蕴37 分钟前
Kotlin语言的软件工程
开发语言·后端·golang
nlog3n38 分钟前
Java观察者模式详解
java·开发语言·观察者模式