如何解决带有 Mux 的 Video.js 不播放视频
我的网站上有一个视频库页面,在此页面上我需要显示上传到 MUX 服务器的视频。我在通过此库播放视频时遇到问题。文件:https://docs.mux.com/guides/video/playback-videojs-with-mux。 代码示例:
<template>
<div>
<div class="video_conteiner_iframe" v-if="video.status === 'ready' && open">
<iframe
v-if="video.api_type === '1'"
:ref="`video_${video.id}`"
:src="`https://cdn.jwplayer.com/players/${video.key}-hSb3JUAg.html`"
class="video"
frameborder="0"
scrolling="auto"
:title="video.name"
allowfullscreen
/>
<video
v-else
:id="video.id"
class="video-js"
controls
preload="auto"
width="100%"
>
<source :src="video.key" type="video/mux" />
</video>
</div>
<div
v-if="video.status === 'ready' && !open"
class="img_body"
@click="openVideo(video.id,video.key)"
>
<div class="play_video">
<div class="play_block" />
</div>
<img
v-if="video.api_type === '1'"
class="video"
:src="`https://cdn.jwplayer.com/thumbs/${video.key}-640.jpg`"
:alt="`${video.key}`"
>
<img
v-else
class="video"
:src="`https://image.mux.com/${video.key}/thumbnail.png`"
:alt="`${video.key}`"
>
</div>
</div>
</template>
<script>
import videojs from '@mux/videojs-kit';
import '@mux/videojs-kit/dist/index.css';
export default {
name: 'vm-video-play',props: {
video: { type: Object,required: true }
},data() {
return {
open: false
};
},methods: {
openVideo(id,key) {
if (window.innerWidth < 1000 && this.$route.name === 'seller-catalogue-id') {
console.log('modal');
} else {
this.open = true;
}
}
}
};
</script>
video.key === PLAYBACK_ID
如果您尝试播放一些 mp4 视频而不是 MUX 视频文件(例如,这是 https://www.w3schools.com/html/mov_bbb.mp4),那么它可以正常工作,但不会显示 MUX 视频文件。
解决方法
我自己尝试过,您基本上需要按照文档中的建议安装 @mux/videojs-kit
并提供您的 env
变量。
这是它的样子
<template>
<div>
<video id="my-player"
class="video-js vjs-16-9"
controls
preload="auto"
width="100%">
</video>
</div>
</template>
<script>
import videojs from '@mux/videojs-kit'
import '@mux/videojs-kit/dist/index.css'
export default {
mounted() {
const player = videojs('my-player',{
timelineHoverPreviews: true,plugins: {
mux: {
debug: false,data: {
env_key: 'gjXXXXXX',// pass your own personal key in an `.env` file
video_title: 'Example Title',},})
player.src({
// this is the public playback ID without the 'https://stream.mux.com/' prefix
src: 'yF8oeOw01qAqbrlQ00TdmHOR02U801P015pawn4uQRbvWHgo.m3u8',type: 'video/mux',})
},}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。