播放m3u8|mp4
代码demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videoJs</title>
<link rel="stylesheet" type="text/css" href="css/video-js.min.css">
<script src="js/video.min.js"></script>
<script src="js/videojs-contrib-hls.js"></script>
</head>
<body>
<section id="videoPlayer">
<video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
<source src="http://127.0.0.1:2100/20200602/video_20200414_142233/index.m3u8?start=10&end=20" type="application/x-mpegURL" id="target">
</video>
</section>
<script type="text/javascript">
var player = videojs('example-video', { "poster": "", "controls": "true" }, function() {
this.on('play', function() {
console.log('正在播放');
});
//暂停--播放完毕后也会暂停
this.on('pause', function() {
console.log("暂停中")
});
// 结束
this.on('ended', function() {
console.log('结束');
})
});
</script>
</body>
</html>
js,css下载地址:
http://www.jq22.com/jquery-info404
官网地址:
https://videojs.com/advanced/?video=disneys-oceans
网盘保存了一份:
https://pan.baidu.com/s/1yGThOrD4LbGHPShAI-P7Ag
- 版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《龙行博客》。
- 本文网址：https://www.liaotaoo.cn/362.html
- 上篇文章：使用代码怎么求和
- 下篇文章：navicat for mysql 中文破解版（无需激活码）
