html5播放m3u8 videojs 倍速播放属性

491 阅读1分钟
<!--直接上干货-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>星星直播中</title>
	<script src="./jquery.min.js"></script>
	<script src="./jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
	<link href="./video-js-cdn.min.css" rel="stylesheet">
	<script src="./video.js"></script>
	<script src="./videojs-contrib-hls.min.js"></script>
</head>
<!--webkit-playsinline="true"  playsinline="true" 设置苹果手机上播放不自动全屏-->
<body>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: 550px'>
            <source id="source" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8" 
			type="application/x-mpegURL">
			</source>
</video>
<script>
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        playbackRates: [0.5,0.8,1,2,4],// # 倍速播放配置
    })
	
    myVideo.play()

</script>
</body>
</html>

​写这个html5可以播放直播文件m3u8格式,并且可以实现倍速的变化的,有需要的朋友可以下载借鉴我的文章,同时也是为了记录自己学习技术的历程

demo下载:下载