我正在使用 react-native-webview 将 Vimeo 视频嵌入到我的 React Native 应用程序中。这些视频在 Vimeo 上启用了隐私限制，我正在努力授权这些视频，以便它们在我的应用程序中不是“私有”的。根据我的研究，我需要做的就是添加授权标头，正如您稍后在我的代码中看到的那样。
我已经尝试了“标题”行的每种组合，但我似乎无法取消它们的私有化。澄清一下，我拥有这些视频，并且 access_code 在我的实现中是正确的。
我想清楚地知道我输入的数据是否正确，或者是否遗漏了某些内容？
我的代码：
import React from "react";
import {
Dimensions,
ActivityIndicator,
View
} from 'react-native';
import WebView from 'react-native-webview';
import urlParser from "js-video-url-parser";
const VimeoEmbed = (props) => {
const { url } = props;
const { width } = Dimensions.get("window");
const height = 0.5625 * width;
const Source = () => {
return {
headers: {
Authorization: 'bearer 0d1450gs4t853kgf3f6c09d1'
},
html: `
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<div>
<iframe src="https://player.vimeo.com/video/${url}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</body>
</html>
`,
}
}
const VideoComponent =
<>
<WebView
source={Source()}
startInLoadingState={true}
scrollEnabled={false}
originWhitelist={['*']}
allowsInlineMediaPlayback={true}
style={{
height: height,
width: width,
margin: 0,
padding: 0,
}}
/>
</>
return VideoComponent;
}
export default VimeoEmbed;
const [apiResponse, setApiResponse] = useState();
useEffect(() => {
axios.get(`https://api.vimeo.com/videos/${ParseUrl.id}`, {
headers: {
referer: "https://yourUrlHere.com",
Authorization: `Bearer ${Token}`,
}
})
.then((response) => {
setApiResponse(response.data);
});
}, [])
const Source = () => { // This is the source that you would insert into the WebView
return {
uri: apiResponse.player_embed_url,
headers: {
referer: "https://yourUrlHere.com",
Authorization: `Bearer ${Token}`
},
}
}