整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家推薦一個(gè)超強(qiáng)大的html5含彈幕視頻播放器插件DPlayer。
dplayer 一款開源的高質(zhì)量H5視頻播放器，Star高達(dá)9.5K+。作者是一名大四95后小鮮肉。支持發(fā)布彈幕、Bilibili視頻及實(shí)時(shí)視頻(HLS M3U8 FLV)等格式。
安裝
$ npm install dplayer --save也可以使用cdn引入，dplayer目前最新版本1.26.0
https://www.bootcdn.cn/dplayer/我們先嘗試初始化一個(gè)最簡(jiǎn)單的 DPlayer
加載播放器文件：
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>使用模塊管理器
import DPlayer from 'dplayer';
const dp = new DPlayer(options);使用js初始化
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.mp4',
},
});DPlayer 有豐富的參數(shù)可以自定義你的播放器實(shí)例，詳細(xì)配置如下：
const dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: false,
theme: '#FADFA3',
loop: true,
lang: 'zh-cn',
screenshot: true,
hotkey: true,
preload: 'auto',
logo: 'logo.png',
volume: 0.7,
mutex: true,
video: {
url: 'dplayer.mp4',
pic: 'dplayer.png',
thumbnails: 'thumbnails.jpg',
type: 'auto',
},
subtitle: {
url: 'dplayer.vtt',
type: 'webvtt',
fontSize: '25px',
bottom: '10%',
color: '#b7daff',
},
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 1000,
addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
user: 'DIYgod',
bottom: '15%',
unlimited: true,
},
contextmenu: [
{
text: 'custom1',
link: 'https://github.com/DIYgod/DPlayer',
},
{
text: 'custom2',
click: (player) => {
console.log(player);
},
},
],
highlight: [
{
time: 20,
text: '這是第 20 秒',
},
{
time: 120,
text: '這是 2 分鐘',
},
],
});清晰度切換
在 video.quality 里設(shè)置不同清晰度的視頻鏈接和類型，video.defaultQuality 設(shè)置默認(rèn)清晰度
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
quality: [
{
name: 'HD',
url: 'demo.m3u8',
type: 'hls',
},
{
name: 'SD',
url: 'demo.mp4',
type: 'normal',
},
],
defaultQuality: 0,
pic: 'demo.png',
thumbnails: 'thumbnails.jpg',
},
});HLS支持
需要在 DPlayer.min.js 前面加載 hls.js
<div id="dplayer"></div>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.m3u8',
type: 'hls',
},
pluginOptions: {
hls: {
// hls config
},
},
});
console.log(dp.plugins.hls); // Hls 實(shí)例提供豐富的文檔支持及示例演示
附上項(xiàng)目文檔及地址
# 文檔地址
http://dplayer.js.org/zh/
# 倉(cāng)庫(kù)地址
https://github.com/MoePlayer/DPlayer另外，DPlayer系列播放器還包含Vue和React版本。
https://dplayer.netlify.app/https://github.com/MoePlayer/react-dplayer好了，就分享到這里。感興趣的同學(xué)可以去看下哈！如果小伙伴們有其它優(yōu)秀的H5播放器，歡迎一起交流討論。
TML5中的video標(biāo)簽用于播放視頻文件的，在video標(biāo)簽中我們可以設(shè)置窗口的寬高，視頻的自動(dòng)播放，循環(huán)播放以及視頻的封面圖片等等
HTML5是下一代HTML，新增了許多新的標(biāo)簽，這些標(biāo)簽實(shí)現(xiàn)了許多新的功能。并且還減少了對(duì)外部插件的要求同時(shí)也可以更好的處理錯(cuò)誤。比如HTML5中的video標(biāo)簽就可以很好的實(shí)現(xiàn)了在頁(yè)面上播放視頻的效果。接下來(lái)在文章中將為大家具體介紹如何使用video標(biāo)簽，具有一定的參考作用，希望對(duì)大家有所幫助
【推薦課程：HTML5教程】
HTML5 video標(biāo)簽的詳細(xì)用法
用于播放視頻文件，比如電影或其它視頻流。可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣做的好處是一些低版本的瀏覽器就可以顯示出不支持該標(biāo)簽的信息
例：
<video src="movie01.mp4" controls></video>
定義寬高
我們可以給這個(gè)視頻自定義寬高來(lái)改變它的窗口大小
<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>
效果圖：
自動(dòng)播放
我們可以通過(guò)設(shè)置屬性來(lái)讓視頻是否開啟自動(dòng)播放
（1）使用autoplay屬性可以讓瀏覽器加載完后視頻文件后立即播放
<video width="400" height="300" controls autoplay>
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
我們還可以在自動(dòng)播放時(shí)設(shè)置muted狀態(tài)，這樣做的目的是當(dāng)視頻自動(dòng)播放時(shí)會(huì)靜音，而且我們還可以通過(guò)點(diǎn)擊播放器的揚(yáng)聲器來(lái)開啟聲音
<video width="400" height="300" controls autoplay muted>
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
效果圖：
循環(huán)播放
我們可以使用loop屬性讓視頻播放結(jié)束時(shí)，再?gòu)念^開始循環(huán)播放。代碼如下所示
<video width="400" height="300" controls loop>
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
預(yù)加載媒體文件
設(shè)置preload屬性中的不同屬性值，來(lái)告訴瀏覽器應(yīng)該怎樣加載一個(gè)媒體文件：
auto：表示讓瀏覽器自動(dòng)下載整個(gè)文件
none：表示讓瀏覽器不必預(yù)先下載文件
metadata：表示讓瀏覽器先獲取視頻文件開頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時(shí)長(zhǎng)，第一幀圖像等）
<video width="400" height="300" controls preload="auto">
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
設(shè)置視頻的封面圖片
通過(guò)poster屬性可以設(shè)置視頻的封面圖片，瀏覽器在下面三種情況下會(huì)使用這個(gè)圖片：
（1）視頻第一幀未加載完畢
（2）把preload屬性設(shè)置為none
（3）沒(méi)有找到指定的視頻文件
<video width="400" height="300" controls preload="none" poster="images/5.jpg">
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
效果圖：
總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，希望通過(guò)這篇文章可以幫助大家學(xué)會(huì)去使用video標(biāo)簽。
以上就是HTML5中video標(biāo)簽如何使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注其它相關(guān)文章！
更多技巧請(qǐng)《轉(zhuǎn)發(fā) + 關(guān)注》哦！
HTML5中。提供了多媒體播放音頻視頻的標(biāo)準(zhǔn)元素，在這之前，要在網(wǎng)站上展示視頻、音頻、動(dòng)畫，用得最多的就是使用FLASH了。使用它們都得在瀏覽器中安裝各種插件才能使用，而且速度相對(duì)比較慢。通過(guò)HTML5中的多媒體新元素去實(shí)現(xiàn)視頻、音頻、動(dòng)畫的播放，免除了瀏覽器安裝插件這一部分，只需要一個(gè)支持HTML5的瀏覽器就ok了。下面來(lái)介紹一下 HTML5中的video元素和audio元素，它們分別用來(lái)處理視頻數(shù)據(jù)和音頻數(shù)據(jù)！
video對(duì)視頻的支持：
audio對(duì)音頻的支持：
video和audio實(shí)例：
video的標(biāo)簽屬性：
control 屬性供添加播放、暫停和音量控件。
audio的標(biāo)簽屬性：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
