使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs

一. vue中使用xgplayer

安装

npm install --save xgplayer

使用

<template><div><div ref="video" id="mmid"></div></div>
</template><script type="text/ecmascript-6">
import Player from "xgplayer";
export default {data(){return{videoPlayer: null}},mounted() {this.getVideo()},methods: {getVideo(){this.videoPlayer = new Player({el: document.querySelector("#mmid"),url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',// url: 'http://192.168.10.215:8080/live/livestream.m3u8',// url: "http://192.168.10.215:8080/live/livestream.flv",width: "100%",height: "240px",volume: 0.6, // 初始音量autoplay: true, // 自动播放playsinline: true,isLive: true,cors: true});}}
}
</script >

播放 m3u8 需要安装 npm install --save xgplayer-hls.js

<script type="text/ecmascript-6">
import HlsJsPlayer from "xgplayer-hls.js";
export default {data(){return{videoPlayer: null}},mounted() {this.getVideo()},methods: {getVideo(){this.videoPlayer = new HlsJsPlayer({el: document.querySelector("#mmid"),// url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',url: 'http://192.168.10.215:8080/live/livestream.m3u8',// url: "http://192.168.10.215:8080/live/livestream.flv",width: "100%",height: "240px",volume: 0.6, // 初始音量autoplay: true, // 自动播放playsinline: true,isLive: true,cors: true});}}
}
</script >

播放http-flv 需要安装 npm install --save xgplayer-flv

<script type="text/ecmascript-6">
import FlvPlayer from "xgplayer-flv";
export default {data(){return{videoPlayer: null}},mounted() {this.getVideo()},methods: {getVideo(){this.videoPlayer = new FlvPlayer({el: document.querySelector("#mmid"),// url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',// url: 'http://192.168.10.215:8080/live/livestream.m3u8',url: "http://192.168.10.215:8080/live/livestream.flv",width: "100%",height: "240px",volume: 0.6, // 初始音量autoplay: true, // 自动播放playsinline: true,isLive: true,cors: true});}}
}
</script >

参考官网：https://v2.h5player.bytedance.com/plugins/#definition

二. 使用videojs
videojs可以播放MP4、m3u8、不可以播放flv

安装 npm install --save video.js
使用

<template><div><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay webkit-playsinline="true"playsinline="true"   style="width: 100%; height: 240px;" type="video/m3u8"><source id="source"src="http://192.168.10.215:8080/live/livestream.flv"type="application/x-mpegURL"></video></div>
</template><script type="text/ecmascript-6">
import videojs from 'video.js'
export default {data(){return{videoPlayer: null}},mounted() {this.getVideo()},methods: {getVideo(){this.videoPlayer = videojs("myVideo",{autoplay: true,preload: 'auto',fluid: true, // 自适应宽高muted: true, // 是否静音// live: truecontrolBar: { // 设置控制条组件/* 设置控制条里面组件的相关属性及显示与否'currentTimeDisplay':true,'timeDivider':true,'durationDisplay':true,'remainingTimeDisplay':false,volumePanel: {inline: false,}*//* 使用children的形式可以控制每一个控件的位置，以及显示与否 */liveDisplay: true,children: [{name: 'playToggle'}, // 播放按钮// {name: 'currentTimeDisplay'}, // 当前已播放时间// {name: 'progressControl'}, // 播放进度条// {name: 'durationDisplay'}, // 总时间// { // 倍数播放//     name: 'playbackRateMenuButton',//     'playbackRates': [0.5, 1, 1.5, 2, 2.5]// },{name: 'volumePanel', // 音量控制inline: false, // 不使用水平方式},{name: 'FullscreenToggle'} // 全屏]},}}
}
</script >

使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs相关推荐

html 百度云视频无法播放器,关于前端直播（videoJS与百度云web播放器：Cyberplayer3.0试用）...
videoJS 实现PC/移动端适应直播,暂停播放出现广告(哎,万恶的广告)git 打开方式下载此demo,浏览器打开 index.htmlgithub 记录初始化直接在标签里面加上 class ...
SkeyeVSS综合安防视频云服务H5无插件直播点播实现HEVC H265 300毫秒以内低延迟播放
SkeyeVSS综合安防视频云服务H5无插件直播点播实现HEVC/H265 300毫秒以内低延迟播放 SkeyeVSS视频云支持HEVC/H265编码格式的摄像机直接接入,同时不需要后台转码,直接在W ...
【音视频处理】MP4、FLV、HLS适用范围，在线视频播放哪个更好
大家好,欢迎来到停止重构的频道. 我们之前讨论过直播协议,本期我们讨论在线点播的视频格式. 也就是网络视频文件.短视频常用的格式如MP4.FLV.HLS等. 我们将详细讨论在线点播场景下,这些视频格 ...
vue通过腾讯Web（H5）播放器，实现直播点播
官档:https://cloud.tencent.com/document/product/454/7503 index.html 引入 <script src="https://im ...
西瓜播放器 vue+xgplayer播放mp4/hls视频流。
npm安装: npm install xgplayer 线上引用地址: <script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/brows ...
Vue-视频加载（vue-video-player）支持.mp4.m3u8.flv.mov格式
github官方地址:https://github.com/surmon-china/vue-video-player.git 1.安装vue-video-player 1).CDN引入 <li ...
EasyDSS流媒体服务器成功实现5G超高清8k视频RTMP/HLS（m3u8）直播过程中遇到的一些坑（insta360 4k/8k直播）
自从2019年春节回来之后,5G直播就如雨后春笋一般,各大公司和运营商都在推行5G 4K.8K高清直播,当然,这也就卖火了insta360这款设备了,各家都在用这个设备做360全景高清4k.8k直播, ...
网页视频播放php拉伸代码,网页在线播放mp4/flv等格式视频方法，CuPlayer(酷播)详细使用方法(附源代码)...
最近有好几个项目都需要在网页上播放视频文件(自己上传的),视频格式包括mp4.flv等等.现在的网站都对用户体验有所要求,所以网站上都不是单一的一行行文字了,都会选择放上很多图片.视频等,这样整体看上 ...
【音视频处理】MP4文件播放不了？视频播放、转码工作原理。封装、编码
大家好,欢迎来到停止重构的频道. 本期开始,我们将展开一个全新的系列:音视频处理. 里面会涉及到直播.音视频转码.音视频合成.音视频AI处理等应用场景. 本期我们先从基础讲起,介绍一下音视频文件.直播 ...

使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs

使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs相关推荐

最新文章

热门文章