英文:
Error by the src attribute or assigned media provider
问题
我正尝试从从Google Firebase API获取的链接导入视频到一个类似TIKTOK的应用程序。但是，当我按播放按钮时，出现以下错误消息：
错误
由src属性或分配的媒体提供程序对象指示的媒体资源不适合。
下面是我正在使用的React代码，其中包含处理视频开始的函数。该视频是从Firebase存储的URL获取的。
import React, { useRef, useState } from "react";
import "./video.css";
function Video() {
const videoRef = useRef(null);
const [play, setPlay] = useState(false);
function handleStart() {
if (play) {
videoRef.current.pause();
setPlay(true);
} else {
videoRef.current.play();
setPlay(true);
}
}
return (
<div className="video">
<video
className="video__player"
ref={videoRef}
onClick={handleStart}
loop
src="https://firebasestorage.googleapis.com/v0/b/jornada-dev.appspot.com/o/brecker2.mp4?alt=media&token=b5399418-9276-4e53-a706-1e00290c2c74"
>
</video>
</div>
);
}
export default Video;
英文:
I am attempting to import a video to a TIKTOK clone application from a link sourced from a Google Firebase API. However, the following error message appears when I press play:
> ERROR
The media resource indicated by the src attribute or assigned media provider object was not suitable.
Below is the React code I am using with a function to handle the start of the video. The video is sourced from a URL on Firebase Storage.
import React, { useRef, useState } from "react";
import "./video.css";
function Video() {
const videoRef = useRef(null);
const [play, setPlay] = useState(false);
function handleStart() {
if (play) {
videoRef.current.pause();
setPlay(true);
} else {
videoRef.current.play();
setPlay(true);
}
}
return (
<div className="video">
<video
className="video__player"
ref={videoRef}
onClick={handleStart}
loop
src="https://firebasestorage.googleapis.com/v0/b/jornada-dev.appspot.com/o/brecker2.mp4?alt=media&token=b5399418-9276-4e53-a706-1e00290c2c74"
>
</video>
</div>
);
}
export default Video;
答案1
得分: 0
当请求响应为对象或错误，而不是实际的媒体数据时，可能会引发媒体类型不匹配的错误。您可以尝试使用JavaScript首先获取媒体数据块，检查是否没有错误，并且对象类型确实是 mp4，然后才将其设置为 src，从而确保传递给 src 的类型是百分之百确定的。
onError={event => console.log(event.target.error.message)}
英文:
Hi 👋 I may assume whenever the request responds with an object or error, and not an actual media blob, it would throw that error that media type was not suited.
You could try fetch the blob with javascript first, check if there is no error, and the object type is indeed mp4 and only after that set it to the src, thus being 100% sure of what type you pass to src.
onError={event => console.log(event.target.error.message)}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论