web

用video.js和H5实现一个漂亮的收看M3U8直播的网站

国庆节快到了，在这里祝大家节日快乐

长假七天乐确实很爽，只是疫情不稳定，还是呆在家里安全些，

在这宅在家的七天里，何不找点有趣的小demo耍耍

本期教大家制作一个能播放M3U8直播源的在线电视台网站，

既能学到知识技术，又可以方便在家看看电视节目，直播节目，何乐而不为

以下是实现的效果图：

58b17efdbd5b4ea2a4c99a84896eebfa~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

f1d0db3b3a324e208b7980cdb02be01a~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

这个小demo完成时间快两年了，所以里面有一些m3u8直播地址用不了

而且直播源的地址经常崩，所以会出现视频播放不了的情况

有需要直接百度搜 m3u8电视直播

具体实现

m3u8 以及 video.js介绍

为什么要介绍这两个东西呢？

因为我们大部分的电视直播在网络上都是m3u8格式的

m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。

我不喜欢太过于术语的解释。

简单来讲，我们看到的直播都是服务器把视频切片，然后一段一段给你发过来，客户端自己处理，整成视频给我们看

这就是 m3u8

但是浏览器并不支持video直接播放m3u8格式的视频

所以我们需要video.js来帮助我们，把这些切片的音视频给整成可以看的东西

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库

Video.js 可以自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器

咋解决这个问题呢，很简单，在html导入我们的video.js就可以了

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引用video.js -->
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video-js.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video.min.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>

引入之后呢，咋用？

在html标签上写上我们的元素,然后在js里面获取我们的播放器，

之后就可以自由用代码控制播放地址源，还有控制播放暂停等等功能

<video id="my-player" class="video-js" controls style="width: 800px;height: 500px;">
               <source src="http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8" type="application/x-mpegURL">
               <p class="vjs-no-js">not support</p>
           </video>  
// video.js
    var player = videojs('my-player', {
        
        });

function play_show(TV_m3u8){
        // alert("正在播放:"+TV_m3u8);
        document.getElementById("my_vedio_fixed").style.display="block";
    
        player.src([{
                type: "application/x-mpegURL",
                src: TV_m3u8
            }])
            player.play()
    }