网页前端(Html)video播放m3u8(HLS)&Vue使用video.js播放m3u8

柔光的暖阳◎ 2023-09-30 12:49 16阅读 0赞

## 网页前端(Html)video播放m3u8(HLS) ##

HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。

开源JS库（Github）：

【video.js】[https://github.com/videojs/videojs-contrib-hls][https_github.com_videojs_videojs-contrib-hls]  
【hls.js】[https://github.com/video-dev/hls.js/][https_github.com_video-dev_hls.js]

腾讯视频SDK（TCPlayerLite），文档地址：[https://cloud.tencent.com/document/product/881/20207][https_cloud.tencent.com_document_product_881_20207]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>videojs-contrib-hls embed</title>
    
      <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
      <script src="https://unpkg.com/video.js/dist/video.js"></script>
      <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
      
    </head>
    <body>
      <h1>Video.js Example Embed</h1>
    
      <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
      data-setup='{}'>
        <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
      </video>
      
      <script>
      </script>
      
    </body>
    </html>

注：可以指定多个source标签。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>前端播放m3u8格式视频</title>
        <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>
        <style>
            .video-js .vjs-tech {
          position: relative !important;}
        </style>
        <div>
            <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>
            </video>
        </div>
        <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
    </body>
     
    <script>
        // videojs 简单使用
        var myVideo = videojs('myVideo', {
          
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })
        myVideo.play()
        var changeVideo = function (vdoSrc) {
          
            if (/\.m3u8$/.test(vdoSrc)) {
           //判断视频源是否是m3u8的格式
                myVideo.src({
          
                    src: vdoSrc,
                    type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
                })
            } else {
          
                myVideo.src(vdoSrc)
            }
            myVideo.load();
            myVideo.play();
        }
        var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';
        document.querySelector('.qiehuan').addEventListener('click', function () {
          
            changeVideo(src);
        })
    </script>

## Vue使用video.js播放m3u8 ##

第一步: 直接安装 兼容7.0 video.js

npm install vue-video-player videojs-contrib-hls --save

第二步: main.js 引入video-js.css

import 'video.js/dist/video-js.css'

第三步：组件页面

<template>
      <div style="padding-top: 30px; width: 100%; height: 360px; position: relative;">
        <video
          id="video"
          preload="auto"
          muted
          class="video-js vjs-default-skin"
          style="width: 100%; height: 100%; object-fit: fill"
        >
         <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
        </video>
      </div>
    </template>
    <script>
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
        
      mounted () {
        
        this.$nextTick(() => {
        
          this.getVideo()
        })
      },
      methods: {
        
        getVideo () {
        
          videojs('video', {
        
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
            controls: true,
            hls: {
        
              withCredentials: true
            }
          }, function () {
        
            this.play()
          })
        }
      }
    }
    </script>

##### 参考链接 #####

[1、验证m3u8视频地址是否可用的工具][1_m3u8]  
[2、主要参考链接：vue组件播放m3u8格式视频][2_vue_m3u8]  
[3、其他参考链接：Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）][3_Vue Video.js_m3u8_video_videojs-contrib-hl]  
[4、video.js官网链接][4_video.js]

[https_github.com_videojs_videojs-contrib-hls]: https://github.com/videojs/videojs-contrib-hls
[https_github.com_video-dev_hls.js]: https://github.com/video-dev/hls.js/
[https_cloud.tencent.com_document_product_881_20207]: https://cloud.tencent.com/document/product/881/20207
[1_m3u8]: https://link.segmentfault.com/?enc=IfCXquEoZ154rQo%2F2ckFwQ%3D%3D.dEONWIiTUXAUUGrDU7jZWkrcj3hS7l8lidPamYs7YmxVrMdAj8B9gA0SGqE823PQ
[2_vue_m3u8]: https://link.segmentfault.com/?enc=aK1Ez9RWNfJx33VqffoJAA%3D%3D.O%2FtX3UfcWlq3CmN8OcE1Katc9tY0wUdk57zjC6Si3Hz0MkS9cM4dKdAe0vV58vcULPqJbQOHQw4Pd633OvzZxQ%3D%3D
[3_Vue Video.js_m3u8_video_videojs-contrib-hl]: https://link.segmentfault.com/?enc=ZKdXFyBqiZK5FdbF87GbFA%3D%3D.HpX%2FqrehMTqsOw9JtF%2BJ9mapZf7%2F7AVF8NqWuxgY1B8NHs4JNZy3h4tlWi1%2FAFS%2B1WTBe%2BzY%2FbeL9Z2EaX3h4Q%3D%3D
[4_video.js]: https://link.segmentfault.com/?enc=LG1v9PNNEBjTqgB2HdX4DQ%3D%3D.WM468%2BV%2FKZ8vK4K7oMf%2BbRz1k78B7r0YmIXH3QRKv90%3D