昨天做了一个直播的页面，使用的是拉流链接是一个.m3u8后缀的链接，以前没有做过直播类型的，所以上网查了下，PC端浏览器普遍都不支持hls协议即.m3u8后缀的视频链接直接播放，所以这里直接使用的是video.js这个视频插件，这个插件里面封装了兼容大部分浏览器视频播放，比较推荐。
官网地址
话不多说，先来看下如何使用：
1.引入该插件：
（1）.CDN方式：
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>//PC端导入
（2）. Npm方式
$ npm install video.js
2页面布局：
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="false" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://pili-live-hls.yunmfang.com/ford/test.m3u8" type="application/x-mpegURL"></source>
</video>
我这里直接用的.m3u8后缀的地址进行拉流的，常见的拉流地址还有rtmp格式和flv格式的
3实例化：
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
autoplay:true,
})
在js里面实例化。根据需求增加功能
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;//暂停时显示播放按钮
}
.video-js.vjs-playing .vjs-tech {
pointer-events: auto;//点击屏幕切换暂停/播放状态
}
下面附上完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<title>测试</title>
<link rel="stylesheet" type="text/css" href="css/video-wx.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="box1">
<img class="logo" src="img/logo.png" alt="">
</div>
<div class="position_video">
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="false" data-setup='{}' style='width: 100%;height: auto'>
<!--此处的拉流地址是实时的，因为是直播，测试的时候需要去直播网站去抓取-->
<source id="source" src="http://p2.weizan.cn/776996/132019361032858183/live.m3u8" type="application/x-mpegURL"></source>
</video>
</div>
</div>
</body>
</html>
<script>
(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
// 如果页面的宽度超过了750px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 750)
// 设计稿为750px的情况下，100px = 1 rem。便于换算
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
autoplay:true,
})
</script>
我这个是移动端的代码，整个页面非常的简洁和简单，需要注意的是PC端，一定要导入video.js的插件videojs-contrib-hls
至此直播页面应该是全部完成了，然后下面介绍下放到服务器上的问题：
关于HTTPS和HTTP：
服务方给到的拉流地址是HTTP开头的，当我将直播页面放到HTTP的服务器中 ，直播可以正常进行，当我将同样的代码放入HTTPS的服务器中的时候，页面就会出现报错，无法正常播放。
原因是因为HTTPS是一个相对安全的网络访问协议，HTTP是一个相对不安全的网络访问协议，在HTTPS里面是无法请求HTTP的外链地址的。
解决办法有两种：
1.一种是将拉流的直播服务器升级到HTTPS，这样就可以正常的进行访问。但是这一种在我现在的项目中是难以实现的，因为只播放的链接并不是生成出来给我们一方使用的，所以我们只能使用第二种方法。
2.因为现有的HTTPS的服务器多半都是可以以HTTP的请求正常访问的，所以这里只需要将访问链接中的HTTPS改成HTTP即可解决现有的问题，当然这种问题是治标不治本的，要想从根本上去解决这个问题，还是需要第一种方法。
到此，直播页面就没问题了，写的有什么问题或者有什么更好的解决方案，希望大家一起多多交流！
网友评论