欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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/

H5播放HLS之DPlayer播放

点击播放即可播放我们的HLS视频流了
H5播放HLS之DPlayer播放

经过初步测试Dplayer的延迟比hls.min.js和videojs延迟还要大,大概在10s左右,而videojs大概在7-8s

源码获取、合作、技术交流请获取如下联系方式:
QQ交流群:961179337
H5播放HLS之DPlayer播放

微信账号:lixiang6153
公众号:IT技术快餐
电子邮箱:aaa@qq.com