LivePlayer H5播放器 使用說明
- 支持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 truecontrols?顯示播放器控制欄, Boolean default trueloop?是否循環播放, Boolean default falselive?是否直播, 標識要不要顯示進度條, Boolean default falsealt?視頻流地址沒有指定情況下, 視頻所在區域顯示的文字, 相當于 html img 標簽的 alt 屬性, String default ‘無信號’muted?是否靜音, Boolean default trueaspect?視頻顯示區域的寬高比, fullscreen 即是全屏展示, String default ’16:9′loading?指示加載狀態, 支持 sync 修飾符, Boolean default falsefluent?流暢模式, Boolean default truestretch?是否拉伸, Boolean default falsetimeout?m3u8 加載超時(秒), Number default 20show-custom-button?是否在工具欄顯示自定義按鈕(極速/流暢, 拉伸/標準), Boolean default truehide-big-play-button?是否隱藏起播狀態下的大播放按鈕, Boolean default falsehide-snapshot-button?是否隱藏 快照 按鈕, Boolean default falsehide-fullscreen-button?是否隱藏 全屏 按鈕, Boolean default falsehide-fluent-button?是否隱藏 極速/流暢 按鈕, Boolean default falsehide-stretch-button?是否隱藏 拉伸/標準 按鈕, Boolean default falseresolution?供選擇的清晰度配置, 如 “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 1hasaudio?HTTP-FLV播放時使用:是否有音頻，傳遞該屬性用于處理只有音頻或只有視頻的源, Boolean 默認不配置自動判斷hasvideo?HTTP-FLV播放時使用:是否有視頻，傳遞該屬性用于處理只有音頻或只有視頻的源, Boolean 默認不配置自動判斷custom-buttons?自定義工具欄按鈕, 配置模板(按鈕名稱[:class名稱]), 多個用英文逗號分隔, 示例：custom-buttons=”對講,配置:vjs-icon-cog”, String default ”autofocus?是否自動獲取焦點, Boolean default falsedblclick-fullscreen?是否雙擊全屏, Boolean default truelanguage?語言(zh-CN/en), String 默認不配置自動判斷
方法(Medthod)
play?播放pause?暫停paused?獲取暫停狀態getCurrentTime?獲取當前播放時間進度, 同步返回播放時間進度數據setCurrentTime?設置當前播放時間進度, 即 seeksnap?外部 API 方式獲取快照, 快照獲取成功后, 觸發 snapOutside EventgetMuted?獲取靜音狀態setMuted?設置靜音狀態isFullscreen?獲取全屏狀態requestFullscreen?觸發全屏, 需要放置到交互事件回調中調用exitFullscreen?退出全屏, 需要放置到交互事件回調中調用toggleFullscreen?觸發全屏, 需要放置到交互事件回調中調用, 如果已處在全屏狀態, 則退出全屏getVolume?獲取音量setVolume?設置音量, 0~1
事件(Event)
message?m3u8 加載失敗時觸發通知消息, 參數: { type: ”, message: ”}error?播放器出錯回調, 參數: Error Objectended?播放結束, 參數: 無timeupdate?進度更新, 參數: 當前時間進度pause?暫停, 參數: 當前時間進度play?播放, 參數: 當前時間進度fullscreen?全屏狀態改變, 參數：true/falsesnapOutside?外部快照回調, 參數: 快照 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?連接的并發個數有限制, 幾種方式規避這個問題：
- 通過 WebRTC 協議訪問直播流，如：播放 WebRTC 直播流
- 通過 WebSocket 協議訪問直播流，如：播放 WS-FLV 直播流
- 開啟 HTTPS, 通過 HTTPS 協議訪問直播流
如何自適應 div
設置 aspect=’fullscreen’，父級元素加上 position: relative
播放器如何銷毀
將?video-url?屬性置為空即銷毀
支持播放 RTSP 嗎
不能直接在瀏覽器中播放 RTSP， 推薦使用?LiveNVR?拉轉 RTSP 成 WebRTC、FLV、WS_FLV、HLS、RTMP 來間接支持
支持 H265 編碼嗎
不支持