EasyPlayer.js

集 rtmp, hls, flv, websocket 於一身的網頁直播/點播播放器, 使用簡單, 功能強大
javascript

屬性(Property)

video-url 視頻流地址 String default ‘’
video-title 視頻右上角顯示的標題 String default ‘’
poster 視頻封面圖片 String default ‘’
autoplay 自動播放 Boolean default true
loop 是否循環播放 Boolean default false
live 是否直播, 標識要不要顯示進度條 Boolean default false
alt 視頻流地址沒有指定狀況下, 視頻所在區域顯示的文字, 至關於 html img 標籤的 alt 屬性 String default ‘無信號’
muted 是否靜音 Boolean default false
aspect 視頻顯示區域的寬高比 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

方法(Medthod)

getCurrentTime 獲取當前播放時間進度, 同步返回播放時間進度數據
snap 外部 API 方式獲取快照, 快照獲取成功後, 觸發 snapOutside Event

事件(Event)

message 觸發通知消息, 參數: { type: ‘’, message: ‘’}
ended 播放結束, 參數: 無
timeupdate 進度更新, 參數: 當前時間進度
pause 暫停, 參數: 當前時間進度
play 播放, 參數: 當前時間進度,
snapOutside 外部快照回調, 參數: 快照 Base64 數據
snapInside 內部快照回調, 由控制欄快照按鈕觸發, 參數: 快照 Base64 數據

安裝(Install)

安裝

npm install easy-playerhtml

在 Vue 中使用

copy node_modules/easy-player/dist/component/easy-player.swf 到 www 根目錄vue

copy node_modules/easy-player/dist/component/crossdomain.xml 到 www 根目錄java

copy node_modules/easy-player/dist/component/easy-player-lib.min.js 到 www 根目錄node

以上 copy 操做經過 webpack 完成, 編輯你的 webpack.config.jswebpack

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

在 html 中引用 www 根目錄 easy-player-lib.min.jsweb

編輯你的 Vue 組件chrome

......

import EasyPlayer from 'easy-player'

......
  components: {
    EasyPlayer
  }
......

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

脫離 Vue 使用

copy node_modules/easy-player/dist/element/easy-player.swf 到 www 根目錄npm

copy node_modules/easy-player/dist/element/crossdomain.xml 到 www 根目錄服務器

copy node_modules/easy-player/dist/element/easy-player-element.min.js 到 www 根目錄

在 html 中引用 www 根目錄 easy-player-element.min.js

HTML 集成 Demo

<!DOCTYPE HTML>
<html>
    <head>
        <title>easy-player</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">
    <body>      
        <easy-player video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" live="true" stretch="true"></easy-player>
        <easy-player video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" live="false" stretch="true"></easy-player>
        <easy-player video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv" live="true" stretch="true"></easy-player>
        <easy-player video-url="ws://192.168.1.65:3000/play?stream=rtsp://username:password@192.168.1.64:5504/Streaming/Channels/102"></easy-player>
    <script type="text/javascript" src="easy-player-element.min.js"></script></body>
</html>

獲取更多信息

郵件：support@easydarwin.org

EasyDarwin開源流媒體服務器：www.EasyDarwin.org

EasyDSS商用流媒體解決方案：www.EasyDSS.com