咨询在线客服

服务热线

0598-6333663

福建省政府网超入驻商
软件下载

微信服务号

LivePlayer H5播放器 使用说明_尤溪县新蓝信息科技有限公司
首页 > 技术支持 > 技术文章 >

LivePlayer H5播放器 使用说明

频道：技术文章 浏览：1624
  • 支持WebRTC播放;
  • 支持MP4播放;
  • 支持m3u8/HLS播放;
  • 支持HTTP-FLV/WS-FLV播放;
  • 支持RTMP播放;
  • 支持直播和点播播放;
  • 支持播放器快照截图;
  • 支持点播多清晰度播放;
  • 支持全屏或比例显示;
  • 自带的flash支持极速和流畅模式;
  • 自带的flash支持HTTP-FLV播放;
  • 自动检测IE浏览器兼容播放;
  • 支持自定义叠加层;

示例效果

属性(Property)

  • video-url 视频流地址, String default ”
  • video-title 视频右上角显示的标题, String default ”
  • poster 视频封面图片, String default ”
  • autoplay 自动播放, Boolean default true
  • controls 显示播放器控制栏, Boolean default true
  • loop 是否循环播放, Boolean default false
  • live 是否直播, 标识要不要显示进度条, Boolean default false
  • alt 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性, String default ‘无信号’
  • muted 是否静音, Boolean default true
  • aspect 视频显示区域的宽高比, fullscreen 即是全屏展示, String default ’16:9′
  • loading 指示加载状态, 支持 sync 修饰符, Boolean default false
  • fluent 流畅模式, Boolean default true
  • stretch 是否拉伸, Boolean default false
  • timeout m3u8 加载超时(秒), Number default 20
  • show-custom-button 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true
  • hide-big-play-button 是否隐藏起播状态下的大播放按钮, Boolean default false
  • hide-snapshot-button 是否隐藏 快照 按钮, Boolean default false
  • hide-fullscreen-button 是否隐藏 全屏 按钮, Boolean default false
  • hide-fluent-button 是否隐藏 极速/流畅 按钮, Boolean default false
  • hide-stretch-button 是否隐藏 拉伸/标准 按钮, Boolean default false
  • resolution 供选择的清晰度配置, 如 “yh,fhd,hd,sd” (说明：yh:原始分辨率，fhd:超清，hd:高清，sd:标清,不配置则不启用,需要提供多清晰度源，比如原画源是test.m3u8, 则hd源即为test_hd.m3u8), String default ”
  • resolutiondefault 默认播放的清晰度, String default ‘hd’
  • playback-rates 倍速列表, Array default [0.5, 1, 2, 3]
  • playback-rate 默认倍速, Number default 1
  • hasaudio HTTP-FLV播放时使用:是否有音频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断
  • hasvideo HTTP-FLV播放时使用:是否有视频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断
  • custom-buttons 自定义工具栏按钮, 配置模板(按钮名称[:class名称]), 多个用英文逗号分隔, 示例：custom-buttons=”对讲,配置:vjs-icon-cog”, String default ”
  • autofocus 是否自动获取焦点, Boolean default false
  • dblclick-fullscreen 是否双击全屏, Boolean default true
  • language 语言(zh-CN/en), String 默认不配置自动判断

方法(Medthod)

  • play 播放
  • pause 暂停
  • paused 获取暂停状态
  • getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据
  • setCurrentTime 设置当前播放时间进度, 即 seek
  • snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event
  • getMuted 获取静音状态
  • setMuted 设置静音状态
  • isFullscreen 获取全屏状态
  • requestFullscreen 触发全屏, 需要放置到交互事件回调中调用
  • exitFullscreen 退出全屏, 需要放置到交互事件回调中调用
  • toggleFullscreen 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏
  • getVolume 获取音量
  • setVolume 设置音量, 0~1

事件(Event)

  • message m3u8 加载失败时触发通知消息, 参数: { type: ”, message: ”}
  • error 播放器出错回调, 参数: Error Object
  • ended 播放结束, 参数: 无
  • timeupdate 进度更新, 参数: 当前时间进度
  • pause 暂停, 参数: 当前时间进度
  • play 播放, 参数: 当前时间进度
  • fullscreen 全屏状态改变, 参数：true/false
  • snapOutside 外部快照回调, 参数: 快照 Base64 数据
  • snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据
  • customButtons 自定义按钮点击回调, 参数：名称

安装使用(Install)

安装

  • vue2

    npm install @liveqing/liveplayer

  • vue3

    npm install @liveqing/liveplayer-v3

或 下载版本包

在 Vue 中使用

第一步 复制依赖文件（示例 通过 webpack 插件自动复制依赖）

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js 到 www 根目录

以上 copy 操作可以借助 webpack 插件完成

安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,

编辑你的 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

......
    // copy js lib and swf files to dist dir
    new CopyWebpackPlugin([
        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
    ]),
......

如果正在使用 vue2 + vue-cli, 编辑你的 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    configureWebpack: {
      plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
            { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
            { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
        ])
      ]
    }
  }

如果正在使用 vue3 + vite, 编辑你的 vite.config.js

import copy from 'rollup-plugin-copy'

export default defineConfig({
  plugins: [vue(), copy({
    targets: [
      {src: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', dest: 'public/js'},
    ]
  })]
})

vue2 + vue-cli 集成 LivePlayer H5 播放器 Gitee 示例

vue3 + vite 集成 LivePlayer H5 播放器 Gitee 示例

第二步 html模板中引入依赖js

在 html 中引用 www 根目录 liveplayer-lib.min.js

<!DOCTYPE HTML>
<html>
    <head>
        <title>template</title>
        ......
        <script src="js/liveplayer-lib.min.js"></script>
        <!-- 如果正在使用 vue-cli:
            <script src="<%=%20BASE_URL%20%>js/liveplayer-lib.min.js"></script>
        -->
    </head>
    <body>
        ......
    </body>
</html>

第三步 编辑你的 Vue 组件


......

import LivePlayer from '@liveqing/liveplayer' // vue2

// import LivePlayer from '@liveqing/liveplayer-v3' // vue3

......
  components: {
    LivePlayer
  }
......

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

脱离 Vue 使用

copy node_modules/@liveqing/liveplayer/dist/element/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/element/crossdomain.xml 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/element/liveplayer-element.min.js 到 www 根目录

在 html 中引用 www 根目录 liveplayer-element.min.js

HTML 集成 Demo, 需要将页面代码放到 HTTP Web Server 容器下

<!DOCTYPE HTML>
<html>
    <head>
        <title>liveplayer</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引用 liveplayer-element.min.js -->
        <script type="text/javascript" src="liveplayer-element.min.js"></script>
    </head>
    <body>
        <live-player id="player01" video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" live="true" stretch="true">
            <div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div>
        </live-player>
        <live-player video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" live="false" stretch="true"></live-player>
        <live-player video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv" live="true" stretch="true"></live-player>

        <script>
            window.onload = function () {
                // 页面加载完成以后执行
                // JavaScript 交互示例, 需要将页面代码放到 http web server 容器下, 通过浏览器 http 协议访问
                var player = document.getElementById('player01');
                player.addEventListener('snapOutside', evt => {
                    console.log('获取快照 base64 数据', evt.detail[0]);
                });
                player.addEventListener('customButtons', function(evt) {
                    console.log('自定义按钮点击回调 按钮名称', evt.detail[0])
                });
                player.addEventListener('fullscreen', evt => {
                    console.log('fullscreen', evt.detail[0]);
                });
                var videoUrlBak = "";
                document.addEventListener("visibilitychange", () => {
                    if (document.visibilityState === 'visible') {
                        if(videoUrlBak) {
                            console.log("标签页恢复可见, 继续播放...");
                            player.setAttribute("video-url", videoUrlBak);
                        }
                    } else {
                        console.log("标签页不可见, 停止播放...");
                        videoUrlBak = player.getAttribute("video-url");
                        player.setAttribute("video-url", "");
                    }
                });
                setTimeout(() => {
                    console.log("快照, 回调 snapOutside...");
                    player.getVueInstance().snap();
                    console.log("静音...");
                    player.getVueInstance().setMuted(true);
                    console.log("静音状态: " + player.getVueInstance().getMuted());
                    console.log("暂停...");
                    player.getVueInstance().pause();
                    console.log("暂停状态: " + player.getVueInstance().paused());
                    console.log("全屏状态: " + player.getVueInstance().isFullscreen());
                    //触发全屏, 需要放置到交互事件回调中
                    //btn.onclick = () => { player.getVueInstance().requestFullscreen(); }
                    player.getVueInstance().setMuted(false);
                    console.log("音量: " + player.getVueInstance().getVolume());
                    player.getVueInstance().setVolume(0.5);
                    console.log("音量1: " + player.getVueInstance().getVolume());
                    player.getVueInstance().setVolume(0.3);
                    console.log("音量2: " + player.getVueInstance().getVolume());
                }, 3000);
                setTimeout(() => {
                    console.log("放音...");
                    player.getVueInstance().setMuted(false);
                    console.log("静音状态: " + player.getVueInstance().getMuted());
                    console.log("播放...");
                    player.getVueInstance().play();
                    console.log("暂停状态: " + player.getVueInstance().paused());
                }, 6000);
                setTimeout(() => {
                    console.log("切换媒体源...");
                    player.setAttribute("video-url", "rtmp://live.hkstv.hk.lxdns.com/live/hks2");
                }, 9000);
            }
        </script>
    </body>
</html>

常见问题

页面控制台 Console 错误提示

  • 提示： ReferenceError: videojs is not defined

    如果在 Vue 中使用，检查 html 是否正确引入依赖 js/liveplayer-lib.min.js

    如果脱离 Vue 使用，检查 html 是否正确引入依赖 liveplayer-element.min.js

  • 提示： TypeError: The element or ID supplied is not valid. (videojs)

    检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）

  • 提示：Access to XMLHttpRequest at … from origin …. has been blocked by CORS policy

    检查 video-url 设置的播放地址 是否允许跨域访问

多分屏超过 6 路不能播放

浏览器对同源 HTTP/1.x 连接的并发个数有限制, 几种方式规避这个问题：

  1. 通过 WebRTC 协议访问直播流，如：播放 WebRTC 直播流
  2. 通过 WebSocket 协议访问直播流，如：播放 WS-FLV 直播流
  3. 开启 HTTPS, 通过 HTTPS 协议访问直播流

如何自适应 div

设置 aspect=’fullscreen’，父级元素加上 position: relative

播放器如何销毁

将 video-url 属性置为空即销毁

支持播放 RTSP 吗

不能直接在浏览器中播放 RTSP， 推荐使用 LiveNVR 拉转 RTSP 成 WebRTC、FLV、WS_FLV、HLS、RTMP 来间接支持

支持 H265 编码吗

不支持

相关资讯