首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在景观RN (IOS & Android)上制作自动播放的在线视频到全屏

如何在景观RN (IOS & Android)上制作自动播放的在线视频到全屏
EN

Stack Overflow用户
提问于 2019-08-06 23:44:01
回答 1查看 498关注 0票数 1

我用(Android )做了一个项目,在第一页和帖子页面是播放automatic.This视频的视频,有时是youtube,有时是m3u8。在肖像方向上,我想与下面的一些内容保持一致,在风景上,我想玩全屏游戏。

我使用react本机- Android -全屏- WebView -视频来操作WebView组件,而对于Android,它可以工作。但顾名思义,它只适用于android系统。我也希望IOS也有类似的行为。我尝试的反应-本机-af-视频播放器,但当我设置依赖反应本机定向,视频卡在全屏模式。此外,该反应-本机-af-视频播放器是mp4唯一的播放器。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 if(livestream.type === 'youtube' && Platform.OS === 'android') {
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={{
                    uri: livestream.url
                }}
                />
            ) 
        } else if(livestream.type === 'youtube' && Platform.OS === 'ios') {
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={{
                    uri: livestream.url
                }}
                />
            ) 

        } else if(livestream.type === 'jwplayer' && Platform.OS === 'android') { 
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={{
                    uri: livestream.url
                }}
                />
            ) 
        } else if(livestream.type === 'jwplayer' && Platform.OS === 'ios') {

            const video = {
                html: `<video width="${VIDEO_WIDTH}" height="${VIDEO_HEIGHT}"  controls  src="${
                    livestream.url
                }"></video>`
            };
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={video}
                />
            ) 

        }

就像我说的,我也希望IOS平台的反应-本机-android-全屏幕-webview-视频的行为。

EN

回答 1

Stack Overflow用户

发布于 2022-03-29 21:59:39

react本机-af-视频播放器不再被维护,因此它会给您带来很多麻烦,您可以在适当的地方使用react本机-af-视频播放器-更新包。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57389339

复制
相关文章
如何在ios成功上架android tv?​
如果你是新手,将在这里清晰发布到App Store整个上架流程,还有相应的流程解决方案。​
iOS程序应用
2022/12/06
2990
如何在IOS上发布到安排【app store】
App Store是唯一的官方应用商店,如果自己不知道怎么上架,可以借助第三方开发者服务平台进行上架。应用规范的情况下,加急三天就可以上架。
iOS Magician
2023/03/22
4050
RN集成到Android原生项目实践
1.新建普通Android项目 新建一个普通的Android项目即可,打开Android Studio -> File -> New -> New Project… 按步骤执行即可。
用户1269200
2018/12/06
2.8K0
视频H5 video最佳实践
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。
gnip
2020/10/28
4.6K0
iOS全屏滑动代码
- (void)viewDidLoad {     [super viewDidLoad];         // 获取系统自带滑动手势的target对象     id target = self.interactivePopGestureRecognizer.delegate;         // 创建全屏滑动手势,调用系统自带滑动手势的target的action方法     UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] in
大师级码师
2021/09/21
1.1K0
android toast全屏,Android Toast实现全屏显示
本文为大家分享了Android Toast全屏显示的具体代码,供大家参考,具体内容如下
全栈程序员站长
2022/09/30
4.2K0
iOS全屏滑动代码
- (void)viewDidLoad {     [super viewDidLoad];         // 获取系统自带滑动手势的target对象     id target = self.interactivePopGestureRecognizer.delegate;         // 创建全屏滑动手势,调用系统自带滑动手势的target的action方法     UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] in
好派笔记
2021/10/29
1.4K0
RN同构系列:现有的IOS APP如何集成RN
react-native 大家都比较熟悉了,如果是一个全新的项目,直接使用 RN 的脚手架功能初始化项目就可以,直到上架之前,前端的小伙伴可能都不怎么需要关心 native 的代码。
腾讯IVWEB团队
2020/06/24
3.4K0
关于直播卖货系统平台在微信浏览器中音视频播放的问题
Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以直播卖货系统页面播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。
云豹kj的晨曦
2020/09/17
1.2K0
关于直播卖货系统平台在微信浏览器中音视频播放的问题
H5直播避坑指南
面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。
小时光
2018/01/29
10.9K1
H5直播避坑指南
Android与RN层的交互
Android跳转到RN页面 由于主客是以插件化的方式集成功能插件的,所以在主客中Android跳转到RN页面需要plugin、module和component。plugin、module不过多解释,component对应的是具体的js页面,要成功启动此页面,需要在对应的RN二方库中注册此页面。例如:
xiangzhihong
2022/11/30
5450
仿抖音视频全屏播放&滑动切换
随着移动技术的快速迭代,数据流量费用的快速下降,视频、直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定回放视频使用。
前端小tips
2021/11/30
4.2K0
仿抖音视频全屏播放&滑动切换
小白如何在ios中安装ios上架
以前四布我们都做过,详细看这个博客:使用Appuploader在窗口上申请iOS开发所需的证书和描述文件,我们主要看下面的几个步骤。
iOS Magician
2023/03/22
9560
小白如何在ios中安装ios上架
HTML5 video视频的playsinline和autoplay
问题其实很简单,就是h5的video视频如何在iPhone上不全屏显示,并且自动播放。
jojo
2022/04/01
4.5K0
Mac录屏软件:Record It[通俗易懂]
Record It 是一款屏幕录制应用软件,支持录制屏幕和录制声音,让您能够精准,高质量地捕获屏幕上所有的活动。 Record It 支持制作专业的应用软件演示,录制在线视频,ppt 和图片幻灯片,制作指导教程等。同时录制来自系统声音或麦克风的声音。
全栈程序员站长
2022/09/30
4.4K0
Mac录屏软件:Record It[通俗易懂]
原 HTML5 video视频的plays
作者:汪娇娇 时间:2017年1月17日 问题其实很简单,就是h5的video视频如何在iPhone上不全屏显示,并且自动播放。 测过就知道,只要在video上加一个autoplay属性,就可以在iPad或者Browser上自动播放;给video加一个宽高,就可以在iPad或者Browser上不全屏播放。但在iPhone上用这方法简直免谈。 话不多说,直接说方法。 HTML(加webkit-playsinline和autoplay属性) <video id="player" width="480" heig
jojo
2018/05/03
8440
H5直播避坑指南
作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑,斩荆披棘,我们一步步提升了体验,做到了和app基本一致的体验。在摸索优化背后,我们也想把这些问题和解决方法总结下来,让其他同学做到直播的时候可以自豪的说,这
小时光
2018/01/15
5.5K0
H5直播避坑指南
H5 直播避坑指南
本文来自“小时光茶社(Tech Teahouse)”公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑,斩荆披棘,我们一步步提升了体验,做到了和app基本一致的体验。在摸索优化背后,我们也想把这些问题
腾讯Bugly
2018/03/23
2.9K0
react-native-swiper组件-横扫你的轮播图
一念起,万水千山。一念灭,沧海桑田。 许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的速度么。 打开终端运行之前的项目,无意间
谦谦君子修罗刀
2018/05/02
3.6K0
react-native-swiper组件-横扫你的轮播图
复杂帧动画之移动端video采坑实现
Airbnb 开源项目,通过解析 AE 动画为 json 数据,支持跨平台的动画效果解决方案;lottie 在辅导中已经有实际应用,使用过的同学都表示对其实现效果和开发速度表示称赞和推荐。
IMWeb前端团队
2019/12/04
2.4K0

相似问题

libgdx ios景观不是全屏

11

如何在iOS Safari中触发全屏景观?

14

在iOS上禁用全屏自动播放功能

42

如何在iOS 5上以景观模式制作视频显示?

21

如何在Android中制作粘性节头(如iOS)?

60
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文