昨天做了一个直播的页面，使用的是拉流链接是一个.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即可解决现有的问题，当然这种问题是治标不治本的，要想从根本上去解决这个问题，还是需要第一种方法。

到此，直播页面就没问题了，写的有什么问题或者有什么更好的解决方案，希望大家一起多多交流！

video.js使用心得和https/http区别