引用video.js库
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
video.js文档里只有三种视频格式在支持
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
对于m3u8的使用需要把type改为application/x-mpegURL
例如
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videojs视频播放DEMO</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<body>
<h3>视频播放</h3>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png">
<source src="http://127.0.0.1:7002/live/movie.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>
<script>
var player = videojs('example_video_1', {
muted: true,
controls: true,
height: 300,
width: 400,
loop: true,
// 更多配置.....
});
</script>
