使用hls.js库

代码很简单，hls.js是解析流媒体文件，调用<video>标签进行播放的，如果只是播放m3u8音频，也可以使用<audio>标签

        <!--引入hls.js-->
    <script src="path/to/hls.min.js"></script>
    <!--video标签-->
    <video id="radioPlayer" controls>

    </video>

    <script>
        //获取video元素
            var video = document.getElementById("radioPlayer");
            //加载m3u8地址
            var hls = new Hls();
            hls.loadSource("http://xxx.m3u8");
            //附加到视频播放器
            hls.attachMedia(video);
            //定义解析完成的回调函数
            hls.on(Hls.Events.MANIFEST_PARSED,function(){
                video.play();
            });
    </script>

这样网页就可以播放m3u8源了。

如果实现点击切换播放源的代码

    <script>
            var video = document.getElementById("radioPlayer");
            var hls = new Hls();
            hls.on(Hls.Events.MANIFEST_PARSED,function(){
                video.play();
            });
            function changeSource(source){
                hls.loadSource(source);
                hls.attachMedia(video);
            }
    </script>
    <div onclick="changeSource('http://1.m3u8')">
        <p>点击切换1</p>
    </div>
    <div onclick="changeSource('http://2.m3u8')">
        <p>点击切换2</p>
    </div>

但是有的源不可以播放，提示

XXXX form XXXX Xhas been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is XXXX

这是由于浏览器同源策略，同源策略会阻止一个域的javascript 脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port)。当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。

我网上找原因说是在nginx服务器里面加入

add_header access-control-allow-origin *;

发现没有用。搞了半天才明白，这是别人的服务器需要这样配置，才能允许我跨域访问他的资源，我自己的网站配置没有用。

但是我用普通的流媒体播放器却能正常播放，在网页中就出现跨域访问的禁止让我感到疑惑。后来我才知道只是在浏览器中有跨域的限制，解决跨域的问题的几个办法：

1. jsonp方式
2. 代理服务器的方式
3. 服务端允许跨域访问(CORS)
4. 取消浏览器的跨域限制