网站建设以及推广提案书,网站开发和嵌入式开发,酒厂网站源码,在线制作表情包生成器软件用到的插件#xff1a;dplayer、hls dplayer官网#xff1a;dplayer dplayer官网npm安装的是最新版本#xff08;1.27.1#xff09;#xff0c;真机运行异常了#xff0c;可以安装历史版本 dplayer历史版本 远程摄像头视频流格式#xff1a;m3u8 可以用来测试的视频流dplayer、hls dplayer官网dplayer dplayer官网npm安装的是最新版本1.27.1真机运行异常了可以安装历史版本 dplayer历史版本 远程摄像头视频流格式m3u8 可以用来测试的视频流有的用不了多试几个找可以用的m3u8测试视频
安装hls任选其一 npm安装 下载hls文件
安装dplayer 使用 npm:
npm install dplayer --save使用 Yarn:
yarn add dplayer代码示例
templateview classcontainerLayoutdiv iddplayer/div/view
/templatescript
//先加载hls插件、再加载dplayer插件;
import /pages/utils/hls.js
import Dplayer from dplayerexport default {data() {return {videoSrc: http://220.161.87.62:8800/hls/0/index.m3u8,dp: null,}},onLaunch() {console.log(onLaunch)},onReady() {},mounted() {//data里的远程摄像头地址const vs this.videoSrcthis.dp new Dplayer({container: document.getElementById(dplayer),autoplay: true, //是否自动播放loop: true,//视频是否循环播放lang: zh-cn,live: true,screenshot: false,//是否开启截图hotkey: true,//是否开启热键preload: auto,//视频是否预加载volume: 0.7,//默认音量mutex: true,//阻止多个播放器同时播放当前播放器播放时暂停其他播放器video: {url: vs, //视频地址type: customHls,customType: {customHls: function(video, player) {const hls new Hls() //实例化Hls 解析m3u8hls.loadSource(video.src)hls.attachMedia(video)}},},});this.dp.on(canplay, function() {console.log(视频正常播放)});this.dp.on(error, function() {console.log(视频播放异常)});},onLoad() {},onShow() {},methods: {playvideo(vs){},//----------------------------}}
/script
style.containerLayout{margin: 0;padding: 0;border: 0;width: 100vw;height: 100vh;display: flex;flex-direction: column;z-index: 100;}
/style
