eb項目開發中視頻播放是一個非常常見的需求,需要播放器能夠支持pc端和移動端的使用,并且支持常見的視頻格式。我們從github上精選了5款優秀的Html5 播放器插件分享給大家。(排名不分先后)
ckplayer是一款在網頁上播放視頻的開源軟件,主要特點是:開源,功能強大,不依賴其它插件,二次開發方便。
ckplayer基于MIT協議開源。
ckplayer示例圖
當家官網最新版本是X2,更新時間:2020.09.20。
軟件下載后,使用到的文件如下:
ckplayr 文件
一般項目只用到ckplayer.min.js 、ckplayer.swf、language.json、sytle.json 總大小不超過700k。
ckplayer 支持flv、mp4、m3u8、webm等。
功能上常用的播放控制、彈幕、貼片廣告都支持。
2、 Media-element.js
HTML5<audio>或<video>播放器,支持MP4、WebM和MP3,以及HLS、Dash、YouTube、Facebook、SoundCloud和其他具有通用HTML5 MediaElement API的播放器,在所有瀏覽器中實現一致的UI。
media-element.js 示例圖
支持視頻和音頻播放,主要強調在多終端上的界面一致性。
最新版本4.2.17,更新日期:2021-7-6
media-element 所需文件截圖
使用基本功能只需要mediaelement-and-player.min.js、renderers/vimeo.min.js、renderers/twitch.min.js,大小在300k左右,非常小巧。
重點:提供插件機制,通過插件可以實現常見的播放列表、AirPlay、位置標記、視頻預覽等功能。
3、 VideoJs
開源HTML5和Flash視頻播放器。目前多很大廠在使用。官網宣稱世界上最流行的開源html5播放器。
video.js
支持的視頻格式有:mp4,webm,ogv。
最新版本7.14.3, 更新時間:2021-7-27
video.js 文件
文件大小約:700k。
4、 Dplayer
非常可愛的html5 彈幕視頻播放器。主打彈幕功能,支持MP4、HLS、FLV、WebTorrent播放,提供彈幕接口。
國人開發,有中文文檔。國內很多公司在用。
最新版本v1.26.0 更新日期:2020-6-11
dplayer文件
基本功能使用文件大小161k. 另外也提供了很多插件供使用。
5、 Xgplayer
西瓜視頻播放器(HTML5)、一款帶解析器、能節省流量的HTML5視頻播放器。字節跳動提供的開源視頻播放器。
中文文檔寫得很非常全面。支持airplay、彈幕等功能。
支持視頻、音頻播放。基于插件機制,提供了豐富的插件來擴展播放器的功能。官網提供在線生成器來簡化各種參數的配置,如下圖:
推薦使用。
今天為大寫整理了5個優秀的開源視頻播放器的內容,后期會再更新各個播放器的詳細使用并進行詳細的評測,謝謝大家。
lv.js 是 HTML5 Flash 視頻(FLV)播放器,純原生 JavaScript 開發,沒有用到 Flash。由 bilibili 網站開源。
引入js
<script src="flv.min.js"></script>
視圖
<div class="main">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button onclick="flv_load()">加載</button>-->
<button onclick="flv_start()">開始</button>
<button onclick="flv_pause()">暫停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳轉</button>
</div>
js
網頁開發中,跟蹤用戶與多媒體內容(如視頻)的互動是一項常見需求。無論是教育平臺、數據分析,還是用戶參與度統計,監控用戶如何觀看視頻內容都能提供寶貴的見解。這篇文章將探索如何使用JavaScript實現視頻播放時長的跟蹤。
我們的目標是跟蹤用戶觀看視頻的總時長,包括暫停的時間,并將這些信息更新到后臺系統。我們將通過捕獲播放、暫停和結束等事件來計算觀看時間。
讓我們來分解一下實現的關鍵方面:
1. HTML結構
我們將使用HTML5的<video>標簽將視頻嵌入到網頁中。每個視頻元素都將有一個唯一的標識符,以便在JavaScript中輕松訪問。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>視頻播放時長跟蹤</title>
</head>
<body>
<!-- 視頻容器 -->
<video id="video_content1" width="640" height="360" controls>
<!-- 視頻源 -->
<source src="your_video_source.mp4" type="video/mp4" />
</video>
<!-- 包含JavaScript代碼 -->
<script src="your_script.js"></script>
</body>
</html>
2. JavaScript實現
在JavaScript文件(your_script.js)中,我們將處理視頻事件并計算總的觀看時間。
// 獲取視頻元素
let videoMat = "your_video_source.mp4";
let source = document.createElement('source');
let video = document.getElementById('video_content1');
// 設置視頻源
source.src = videoMat;
source.type = 'video/mp4';
// 將源附加到視頻元素
if (video) {
video.appendChild(source);
// 初始化變量
let startTime = null;
let lastUpdateTime = null;
let totalElapsedTime = 0;
// 'play'事件監聽器
video.addEventListener('play', function () {
startTime = new Date();
lastUpdateTime = startTime;
console.log('視頻正在播放。開始時間:', startTime);
});
// 'timeupdate'事件監聽器
video.addEventListener('timeupdate', function () {
if (!video.paused && startTime !== null) {
const currentTime = new Date();
const elapsedSinceLastUpdate = (currentTime - lastUpdateTime) / 1000;
totalElapsedTime += elapsedSinceLastUpdate;
lastUpdateTime = currentTime;
console.log("從開始到現在的觀看時間: " + totalElapsedTime + " 秒");
}
});
// 'pause'事件監聽器
video.addEventListener('pause', function () {
// 僅當視頻已在播放時存儲暫停時間
if (startTime !== null) {
const pausedTime = video.currentTime;
console.log('視頻已暫停。暫停時刻:', pausedTime);
checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
}
});
// 'ended'事件監聽器
video.addEventListener('ended', function () {
// 視頻播放已結束
checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
});
// 'play'事件監聽器(從暫停時間繼續播放)
video.addEventListener('play', function () {
// 如果視頻之前暫停,繼續從暫停時刻播放
if (startTime !== null) {
video.currentTime = video.currentTime;
}
});
}
解釋
實現視頻播放時長的跟蹤可以增強用戶分析,提供有關用戶參與度和內容受歡迎程度的見解。這里提供的JavaScript代碼為您集成視頻跟蹤到網頁應用中提供了基礎。
記得將‘your_video_source.mp4’和‘your_video_title’替換為實際的視頻源和標題。
祝您編碼愉快!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。