LivePlayer H5 player

H5 live/on-demand player, simple to use, powerful, free to use

  • Supports M3U8 playback;
  • Supports HTTP-FLV playback.
  • Support RTMP playback;
  • Support live broadcast and on-demand broadcast;
  • Player snapshot screenshot support;
  • Support on-demand multi definition playback;
  • Support full screen or proportional display;
  • Built-in Flash supports extreme speed and smooth mode;
  • The built-in Flash supports HTTP-FLV playback.
  • Automatic detection of Internet Explorer compatible playback;

Properties (Property)

  • video-urlVideo streaming address String default ‘ ‘
  • video-titleThe title String default ‘shown in the top right corner of the video
  • posterVideo Cover image String default ‘
  • autoplayAutoplay Boolean default true
  • loopBoolean default false Indicates whether to loop
  • liveBoolean default false Indicates whether to display a progress bar
  • altIf the video stream address is not specified, the text displayed in the video area is equivalent to the Alt attribute of the HTML IMG tag String default ‘No signal’.
  • mutedMute Boolean Default false
  • aspectThe width to height ratio of the video display area is fullscreen. String default ’16:9′
  • loadingIndicates load status, with support for sync modifier
  • fluentFluent mode, Boolean default true
  • stretchStretch, Boolean default false
  • timeoutM3u8 Loading timeout (seconds) Number default 20
  • show-custom-buttonWhether to display custom buttons in the toolbar (Extreme/Smooth, Stretch/standard), Boolean default true
  • resolutionFor example, “YH, FHD, HD, SD” (Description: YH: original resolution, FHD: ultra hd, HD: HIGH definition, SD: standard definition. If this parameter is not configured, this parameter is not enabled. You need to provide multiple resolution sources, such as the original picture sourceTest.m3u8, then the hd source istest_hd.m3u8 )
  • resolutiondefaultDefault playback clarity String “HD”
  • hasaudioUse when http-FLv plays: Audio or not, pass this property to handle audio or video only source Boolean, automatic judgment is not configured by default
  • hasvideoUse when http-FLV plays: Whether there is video, pass this property to handle audio – or video-only source Boolean. Automatic judgment is not configured by default

Method (Medthod)

  • getCurrentTimeGets the current playback time progress and synchronously returns the playback time progress data
  • snapAfter a snapshot is obtained using an external API, a snapOutside Event is triggered

Events (Event)

  • messageTrigger notification message, parameters: {type: ‘ ‘, message: ‘ ‘}
  • endedWhen the playback is complete, the parameter is none
  • timeupdateProgress update, parameter: current time progress
  • pausePause, parameter: current time progress
  • playPlay, parameter: current time progress
  • snapOutsideExternal snapshot callback. Parameter: Snapshot Base64 data
  • snapInsideInternal snapshot callback triggered by the snapshot button in the control bar. Parameter: Snapshot Base64 data

Install

The installation

npm install @liveqing/liveplayer

Or download the version pack

Used in Vue

Copy node_modules / @ liveqing/liveplayer/dist/component/liveplayer SWF to the root directory of the WWW

Copy node_modules / @ liveqing liveplayer/dist/component/crossdomain. The XML to the root directory of the WWW

Copy/node_modules / @ liveqing liveplayer/dist/component/liveplayer – lib. Min. Js to the root directory of the WWW

Copy is done via webpack. Edit your 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/'}]),...Copy the code

Reference the WWW root directory liveplayer-lib.min.js in HTML

Edit your Vue components

. import LivePlayer from '@liveqing/liveplayer' ...... components: { LivePlayer } ...... <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>Copy the code

Out of Vue

Copy node_modules / @ liveqing/liveplayer/dist/element/liveplayer SWF to the root directory of the WWW

Copy node_modules / @ liveqing liveplayer/dist/element/crossdomain. The XML to the root directory of the WWW

Copy/node_modules / @ liveqing liveplayer/dist/element/liveplayer – element. Min. Js to the root directory of the WWW

Reference the WWW root directory liveplayer-element.min.js in HTML

Integrated HTML Demo

<! DOCTYPEHTML>
<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 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>
        <live-player video-url=Ws: / / "192.168.1.65:3000 / play? The stream = RTSP: / / username: [email protected]:5504 / Streaming/Channels / 102"></live-player>
    </body>
</html>
Copy the code

To learn more

LiveQing Security streaming media service -QQ communication group: 615081503

LiveGBS GB GB28181-QQ communication group: 947137753

WEB：www.liveqing.com

Copyright © 2016-2019 at LiveQing.com