videojs播放m3u8后缀视频Demo

最新推荐文章于 2024-08-16 07:46:30 发布

点滴进步

最新推荐文章于 2024-08-16 07:46:30 发布

阅读量1.1w

点赞数

分类专栏：前端视频文章标签： html5

原文链接：https://segmentfault.com/a/1190000024447688

版权

视频同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

videojs播放m3u8后缀视频Demo

转载自：https://segmentfault.com/a/1190000024447688

<!DOCTYPE html>

<html lang="zh-CN">

<head>

 <meta charset="UTF-8">

 <title>前端播放m3u8格式视频</title>

 <!--https://www.bootcdn.cn/video.js/-->

 <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>

 <!--https://www.bootcdn.cn/videojs-contrib-hls/-->

 <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

</head>

<body>

 <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> 

 <source id="source" src="https://hqcrm.oss-cn-shenzhen.aliyuncs.com/cloudRecord/44a8cc12038c464f96ad204b1981ee05/3ccd283e9d42022539df549425c11d11_255547796.m3u8" type="application/x-mpegURL">

 </video>

</body>

<script> 

 // videojs 简单使用 

 var myVideo = videojs('myVideo',{

 bigPlayButton : true, 

 textTrackDisplay : false, 

 posterImage: false,

 errorDisplay : false,

 })

 myVideo.play() // 视频播放

 myVideo.pause() // 视频暂停

</script>

</html>