const data = reactive({
playerOptions: {
language: 'zh-CN', // 语言
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
sources: [
{
type: 'application/x-mpegURL', // 类型
withCredentials: false,
src: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' //自己对应视频流的url
}
],
techOrder: ['html5'],
flash: { hls: { withCredentials: false } },
html5: { hls: { withCredentials: false } },
autoplay: true, // 是否自动播放
controls: true, // 是否显示控制栏
notSupportedMessage: '无信号',
muted: true, // 是否静音
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按钮
}
}
})
html:
<video-player
ref="videoPlayer"
style="width: 500px; height: 400px"
class="vjs-custom-skin"
:options="data.playerOptions"
/>