我只想用video.js播放一个简单的HLS流。首先，我用以下代码创建了一个简单的HTML文件：
<head>
<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="https://ntv1.akamaized.net/hls/live/2014075/NASA-NTV1-HLS/master_500.m3u8" type="application/x-mpegurl" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
</body>如果您将上面的代码复制并粘贴到HTML中，并在浏览器上打开该静态文件，它将很好地播放NASA流。
然而，当我尝试在我的NextJS应用程序上播放相同的URL时，我得到以下错误：
GET https://ntv1.akamaized.net/hls/live/2014075/NASA-NTV1-HLS/master_500.m3u8 403 (Forbidden)我使用Next.JS 13，并尝试在客户端渲染播放器组件。但是，我还是犯了同样的错误。下面是我的视频播放器组件：
'use client';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';
import { useRef, useEffect } from 'react';
const MyVideoPlayer = () => {
const videoRef = useRef<any>(null);
useEffect(() => {
if (typeof window !== 'undefined') {
// Code to run on the client-side
const player = videojs(videoRef.current);
player.src({
src: 'https://ntv1.akamaized.net/hls/live/2014075/NASA-NTV1-HLS/master_500.m3u8',
type: 'application/x-mpegURL',
});
}
return () => {
if (videoRef.current) {
videojs(videoRef.current).dispose();
}
};
}, []);
return (
<div data-vjs-player>
<video ref={videoRef} className='video-js'></video>
</div>
);
};
export default MyVideoPlayer;这是我的页面. tsx代码：
'use client';
import React from 'react';
import MyVideoPlayer from '../videoPlayer';
export default function PlayerPage() {
const playerRef = React.useRef(null);
return (
<>
<h1>Welcome to the player page</h1>
<MyVideoPlayer />
</>
);
}我做错了什么？
1条答案
按热度按时间qq24tv8q1#
你在这里得到的错误，“403禁止”，意味着你被拒绝访问HLS流URL。这主要是一个客户端设置问题，可能由于各种原因而发生，例如身份验证、地理阻塞或流服务器上的IP限制。因此，要解决问题，我建议您尝试以下操作：
*跨域资源共享（CORS）限制可能会阻止您的Next.js应用访问HLS流URL。确保托管HLS流的服务器允许来自您的域的跨域请求。您可以检查服务器的响应头以确认CORS是否已启用。或者，您可以尝试不同的内容交付网络（CDN），如Cloudinary，它可以帮助您克服任何CORS或IP限制，并确保您的流媒体播放体验更流畅。