关于前端:videojs播放m3u8后缀视频Demo

35次阅读

共计 987 个字符，预计需要花费 3 分钟才能阅读完成。

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

成果：

正文完