LivePlayer H5播放器

简介

H5直播/点播播放器,使用简单,功能强大, 免费使用

  • 支持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 false

  • aspect 视频显示区域的宽高比, fullscreen 即是全屏展示 String default '16:9'

  • loading 指示加载状态, 支持 sync 修饰符

  • fluent 流畅模式, Boolean default true

  • stretch 是否拉伸, Boolean default false

  • timeout m3u8 加载超时(秒) Number default 20

  • show-custom-button 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true

  • resolution 供选择的清晰度配置 String 如 "yh,fhd,hd,sd" ( 说明:yh:原始分辨率,fhd:超清,hd:高清,sd:标清,不配置则不启用,需要提供多清晰度源,比如原画源是test.m3u8,则hd源即为test_hd.m3u8 )

  • resolutiondefault 默认播放的清晰度 String "hd"

  • hasaudio HTTP-FLV播放时使用:是否有音频,传递该属性用于处理只有音频或只有视频的源 Boolean,默认不配置自动判断

  • hasvideo HTTP-FLV播放时使用:是否有视频,传递该属性用于处理只有音频或只有视频的源 Boolean,默认不配置自动判断

方法(Medthod)

  • play 播放

  • pause 暂停

  • paused 获取暂停状态

  • getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据

  • snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event

  • getMuted 获取静音状态

  • setMuted 设置静音状态

事件(Event)

  • message m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}

  • error 播放器出错回调, 参数: Error Object

  • ended 播放结束, 参数: 无

  • timeupdate 进度更新, 参数: 当前时间进度

  • pause 暂停, 参数: 当前时间进度

  • play 播放, 参数: 当前时间进度

  • snapOutside 外部快照回调, 参数: 快照 Base64 数据

  • snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据

安装使用(Install)

安装

npm install @liveqing/liveplayer

下载版本包

在 Vue 中使用

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 完成, 编辑你的 webpack.config.js


......
    // 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/'}
    ]),
......

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

编辑你的 Vue 组件


......

import LivePlayer from '@liveqing/liveplayer'

......
  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

<!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">
        <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"></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>
            // JavaScript 交互示例, 需要将页面代码放到 http web server 容器下, 通过浏览器 http 协议访问
            var player = document.getElementById('player01');
            player.addEventListener('snapOutside', evt => {
                console.log('获取快照 base64 数据', evt.detail[0]);
            });
            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());
            }, 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>

了解更多

LiveQing&LiveNVR-QQ交流群:615081503

LiveGBS国标GB28181-QQ交流群:947137753

WEB:www.liveqing.com