VideoJS播放hls视频

一、HLS协议：

　　HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件，用于寻找可用的媒体流。
　　HLS只请求基本的HTTP报文，与实时传输协议（RTP)不同，HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。它也很容易使用内容分发网络来传输媒体流。
　　苹果公司把HLS协议作为一个互联网草案（逐步提交），在第一阶段中已作为一个非正式的标准提交到IETF。但是，即使苹果偶尔地提交一些小的更新，IETF却没有关于制定此标准的有关进一步的动作。
 
二、HLS视频特点：
　　使用HTTP传输，因此可以穿过任何允许HTTP数据通过的防火墙或代理服务器；
　　缓冲播放，延迟较长，不适用监控、直播等适时场景
 
三：前端播放HLS视频（借助插件videojs + videojs-contrib-hls）

　　videojs官网  demo：

<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>

　　vue播放hls demo：

　　1.安装依赖

npm install --save-dev video.js
npm install --save-dev videojs-contrib-hls

　　2.简单示例

<template>
    <div @click="max_window">
        <video controls ref="myVideo" autoplay>
            <source :src="url" type="application/x-mpegURL" id="target" />
        </video>
    </div>
</template>

<script>
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
        data() {
            return {
                url: '......', // 预览视频的url
                isMax: true, // 是否点击放大
                myVideo: null, // 视频播放对象
                big_size: false // 放大视频画面
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            // 初始化插件支持his协议
            init() {
                this.myVideo = videojs(this.$refs.myVideo, {
                    bigPlayButton: false,
                    autoplay: false,
                    textTrackDisplay: false,
                    posterImage: true,
                    errorDisplay: true,
                    hls: {
                        withCredentials: true
                    }
                })
            },
            // 放大窗口
            max_window() {
                if (this.isMax) {
                    this.big_size = !this.big_size
                }
            }
        },
        destroyed() {
            this.myVideo.dispose()
        }
    }
</script>

 

posted @ 2021-06-11 11:45  惊蛰丶  阅读(4595)  评论(0)  编辑  收藏  举报