当我想在我的 Expo 应用程序中嵌入 YouTube 视频时遇到问题,当我单击播放按钮时,有时会收到以下消息:
例如,当我在 reddit 上发布此视频时,它通过他们的 YouTube 嵌入式播放器完美播放。
我使用这个代码示例:
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://www.youtube.com/embed/bo_efYhYU2A?rel=0&autoplay=0&showinfo=0&controls=0'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
我知道视频是允许嵌入的,因为如果不是这样,我会收到一条不同的错误消息,它允许我在 youtube 上打开视频:
这里是测试它的链接:https://snack.expo.io/@maxgfr/youtube-embedded
任何帮助将不胜感激
马克西姆
编辑:无效的网址示例 https://www.youtube.com/embed/8GaWM2a3FAc
最佳答案
解决这个问题:
我创建了一个 Web 应用程序,通过视频 ID 加载 YouTube 视频。我的端点是这样的:https://mywebsite.com/ID_VIDEO_YOUTUBE
然后在我的 React Native 应用程序中,我只需加载我网站的 URL:
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://mywebsite.com/ID_VIDEO_YOUTUBE'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
编辑:这是我在 Vue JS 应用程序中使用的代码示例
<template>
<div style="position: fixed;overflow-y: hidden;overflow-x: hidden;width:100%;height:100%;">
<iframe style="width:100%;height:100%;" :src="'https://www.youtube.com/embed/'+this.$route.params.id+'?&autoplay=1&playsinline=1'" autoplay="1" playsinline="1" frameborder="0" scrolling="no" allow="playsinline; accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</template>
<script>
export default {
name: 'youtube',
head: {
link: [{
r: 'icon',
h: '/static/favicon.png',
t: 'image/png'
}]
}
}
</script>
关于webview - YouTube嵌入视频问题(视频不可用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55548102/