H5播放HLS之DPlayer播放
程序员文章站
2022-07-07 14:42:26
...
一、创建vue项目
http://dplayer.js.org/guide.html
DPlayer使用是基于vue的,所以先安装vue并创建vue项目
卸载vue
npm uninstall -g vue-cli
安装vue为最新(4.x)
npm install -g @vue/cli
vue -V
如果需要指定版本安装vue3.x则可以
npm i -g @vue/aaa@qq.com^3.12.1
vue -V
创建项目
vue create video
cd video
npm run serve
vue add router
安装DPlayer组件
npm i dplayer -S
或
yarn add dplayer
二、DPlayer播放
创建好项目后使用vscode编辑器打开,按照如下步骤实现dplayer的使用
1、删除不必要的路由器,修改router.js将HelloWorld.vue设置为跟路由
const routes = [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
},
];
2、添加Dplayer的自定义播放组件VueDplayerHLS.vue
<template>
<div class="dplayer"></div>
</template>
<script>
import DPlayer from "dplayer";
export default {
props: {
autoplay: {
type: Boolean,
default: false,
},
theme: {
type: String,
default: "#FADFA3",
},
loop: {
type: Boolean,
default: false,
},
lang: {
type: String,
default: "zh",
},
screenshot: {
type: Boolean,
default: false,
},
hotkey: {
type: Boolean,
default: true,
},
preload: {
type: String,
default: "auto",
},
contextmenu: {
type: Array,
},
logo: {
type: String,
},
video: {
type: Object,
required: true,
validator(value) {
return typeof value.url === 'string'
}
},
},
data() {
return {
dp: null,
};
},
mounted() {
const player = (this.dp = new DPlayer({
// 挂载元素
element: this.$el,
// 自动播放
autoplay: this.autoplay,
// 主题颜色
theme: this.theme,
// 循环播放
loop: this.loop,
// 显示语言
lang: this.lang,
// 显示抓拍
screenshot: this.screenshot,
// 快捷键
hotkey: this.hotkey,
// 预加载
preload: this.preload,
// 播放器上下文菜单
contextmenu: this.contextmenu,
// 左上角logo
logo: this.logo,
// 播放视频源
video: {
// 播放器背景图
pic: this.video.pic,
defaultQuality: this.video.defaultQuality,
// 不同播放质量源
quality: [
{
url: this.video.quality[0].url,
name: this.video.quality[0].name,
},
{
url: this.video.quality[1].url,
name: this.video.quality[1].name,
}
],
// 缩略图
thumbnails: this.video.thumbnails,
// 视频源类型
type: this.video.type,
},
}));
// 播放事件
player.on("play", () => {
this.$emit("play");
});
// 停止事件
player.on("pause", () => {
this.$emit("pause");
});
// 可播放事件
player.on("canplay", () => {
this.$emit("canplay");
});
// 正在播放事件
player.on("playing", () => {
this.$emit("playing");
});
// 结束播放事件
player.on("ended", () => {
this.$emit("ended");
});
// 播放错误事件
player.on("error", () => {
this.$emit("error");
});
}
};
</script>
<style scoped></style>
关于vue自定义组件基础知识我这里不再涉及!
3、根路由HelloWorld.vue引用播放器组件
<template>
<div class="hello">
<d-player
ref="player"
@play="play"
@pause="pause"
:logo="logo"
:lang="lang"
:video="video"
:contextmenu="contextmenu"
></d-player>
</div>
</template>
<script>
import VueDPlayer from "./VueDplayerHLS";
import logoImg from "@/assets/logo.png";
import backImg from "@/assets/back.jpg";
export default {
name: "HelloWorld",
data() {
return {
video: {
// 视频质量列表
quality: [
{
name: "240P",
url: "http://192.168.12.187:8080/live/1.m3u8",
},
{
name: "360P",
url: "http://192.168.12.187:8080/live/1.m3u8",
},
{
name: "720P",
url: "http://192.168.12.187:8080/live/1.m3u8",
},
],
// 播放器背景图
pic: backImg,
// 默认播放视频质量0开始
defaultQuality: 2,
// 视频缩略图
thumbnails: logoImg,
// 播放视频格式
type: "hls",
},
// 播放器语言
lang: "zh-cn",
// 左上角视频logo图
logo: logoImg,
// 是否自动播放
autoplay: false,
// 播放器实例
player: null,
// 上下文菜单列表
contextmenu: [
{
text: "CSDN",
link: "https://blog.csdn.net/lixiang987654321",
},
{
text: "百度",
link: "https://www.baidu.com",
},
],
};
},
components: {
"d-player": VueDPlayer,
},
methods: {
play() {
console.log('开始播放...')
},
pause() {
console.log('停止播放...')
},
},
mounted() {
//this.player = this.$refs.player.dp;
//console.log(this.player);
//var hls = new Hls();
//hls.loadSource('http://192.168.12.187:8080/live/1.m3u8');
//hls.attachMedia(this.player);
},
};
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.hello {
width: 750px;
margin: 0 auto 50px;
}
@media only screen and (max-width: 640px) {
.hello {
width: 100%;
}
}
</style>
4、打包测试
我们使用开发环境测试,运行如下命令打包
npm run serve
打包完成后,直接打开浏览器地址
http://192.168.50.7:8080/
点击播放即可播放我们的HLS视频流了
经过初步测试Dplayer的延迟比hls.min.js和videojs延迟还要大,大概在10s左右,而videojs大概在7-8s
源码获取、合作、技术交流请获取如下联系方式:
QQ交流群:961179337
微信账号:lixiang6153
公众号:IT技术快餐
电子邮箱:aaa@qq.com