vue 使用vue-video-player播放hls格式视频
Posted byme
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 使用vue-video-player播放hls格式视频相关的知识,希望对你有一定的参考价值。
安装
vue-video-player 在 “
devDependencies
” 中安装
videojs-contrib-hls 在“
dependencies
”中main.js 中引入
import hls from ‘videojs-contrib-hls‘ import VideoPlayer from ‘vue-video-player‘; import "video.js/dist/video-js.css" import "vue-video-player/src/custom-theme.css" Vue.use(hls) Vue.use(VideoPlayer)
页面中使用 第一种方式
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto"> <source src="http://ivi.bupt.edu.cn/hls/cctv1.m3u8" type="application/x-mpegURL" /> </video>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";
mounted()
videojs(
"my-video",
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
,
function()
this.play();
);
页面中使用 第二种方式
<video-player class="video-player vjs-custom-skin" :playsinline="true" :options="‘http://ivi.bupt.edu.cn/hls/cctv1.m3u8‘|videoOption"> </video-player>
import ‘videojs-contrib-hls‘
filters:
videoOption(val)
console.log(‘val‘,val)
return
live: false,
preload: "auto",
autoplay: true,
language: "zh-CN",
aspectRatio: "16:8",
fluid: true,
sources: [
src: val //url地址
],
notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar:
timeDivider: false,
durationDisplay: false,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
,
flash:
hls:
withCredentials: false
,
以上是关于vue 使用vue-video-player播放hls格式视频的主要内容,如果未能解决你的问题,请参考以下文章
求助:Vue 中 vue-video-player 组件 的使用
vue 使用vue-video-player播放hls格式视频
ATP应用测试平台——使用vue-video-player视频播放组件实现网页视频流的播放案例实战