mirror of https://github.com/gwuhaolin/livego.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.8 KiB
51 lines
1.8 KiB
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<title>前端播放m3u8格式视频</title> |
|
<link href="video-js.css" rel="stylesheet"> |
|
<script src='video.js'></script> |
|
<script src="videojs-contrib-hls.min.js" type="text/javascript"></script> |
|
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 --> |
|
</head> |
|
<body> |
|
<style> |
|
.video-js .vjs-tech {position: relative !important;} |
|
</style> |
|
<div> |
|
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'> |
|
<source id="source" src="http://localhost:7001/live/movie.m3u8" type="application/x-mpegURL"></source> |
|
</video> |
|
</div> |
|
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div> |
|
</body> |
|
|
|
<script> |
|
// videojs 简单使用 |
|
var myVideo = videojs('myVideo', { |
|
bigPlayButton: true, |
|
textTrackDisplay: false, |
|
posterImage: false, |
|
errorDisplay: false, |
|
}) |
|
myVideo.play() |
|
var changeVideo = function (vdoSrc) { |
|
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式 |
|
myVideo.src({ |
|
src: vdoSrc, |
|
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值 |
|
}) |
|
} else { |
|
myVideo.src(vdoSrc) |
|
} |
|
myVideo.load(); |
|
myVideo.play(); |
|
} |
|
var src = 'http://localhost:7001/live/movie.m3u8'; |
|
document.querySelector('.qiehuan').addEventListener('click', function () { |
|
changeVideo(src); |
|
}) |
|
</script> |
|
|
|
</html> |