EasyPlayer.js

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

屬性(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-player

在 Vue 中使用

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

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

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

以上 copy 操作通過 webpack 完成, 編輯你的 webpack.config.js


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

編輯你的 Vue 組件


......

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 根目錄

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

EasyNVR無插件直播方案：www.EasyNVR.com

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 網頁全終端視頻直播/點播H5播放器EasyPlayer.js正式發布，支持H.265網頁播放網頁全終端視頻流媒體視頻直播/點播播放器EasyPlayer.js實現WEB播放H265/HEVC視頻方案介紹網頁全終端安防視頻流媒體播放器EasyPlayer.js如何實現在web瀏覽器播放H.265編碼視頻？網頁全終端視頻流媒體視頻直播/點播播放器EasyPlayer.js實現WEB播放H265/HEVC視頻方案介紹高穩定性、低延時的網絡全終端播放器H5播放器網頁直播/點播播放器EasyPlayer.js播放flv格式視頻顯示跨域問題解決方案 React項目中使用LivePlayer.js/EasyPlayer.js播放器 H265網頁播放器EasyPlayer.JS如何監聽播放等相關事件回調？ RTMP、HLS、FLV,、WebSocket 於一身的網頁直播/點播播放器EasyPlayer.js如何實現倍速播放？如何使用H265視頻播放器EasyPlayer.JS調用videojs播放EasyNVR轉發的視頻流？多功能流媒體播放器實現網頁無插件直播之EasyPlayer.js如何實現播放完自動循環播放