React Native webview中video播放MP4格式视频只有音频

参考文章:https://blog.csdn.net/shaobo8910/article/details/81121965?utm_source=blogxgwz8

昨天遇到了这样一个问题,我打算使用HTML5的video标签简单的在网页上插入一个MP4视频,类似这样

<video preload=”none” controls>
<source src=”video.mp4″ type=”video/mp4″>
</video>
但是在网页中我点击播放的时候,却发现只有声音而没有图像。不过我用电脑中的视频播放器播放这段视频还是可以看到图像的。那么问题来了,这个锅谁来背?

问题出在哪

经过一些搜索得知,其实根本的问题是虽然大家都是.mp4后缀的文件,但是编码方式不同,而video标签的标准是用H.264方式编码视频的MP4文件(当然video标签还可以播放WebM和OGG格式的文件,这里就不多说了),而我之前使用的视频文件是Xvid编码的MP4文件,所以只能播放出音频而不能看到图像

解决方法

既然知道了问题出在哪,接下来就要想办法把我现有的视频文件转码成H.264编码的文件。
我使用的是Mac, 而且之前并没有装过什么视频转码的应用,搜索了一下发现Mac自带一个功能叫“编码所选视频文件”,我尝试着使用了一下。发现然并卵,生成的文件就像我在浏览器中播放的一样,只有声音没有图像,大概这个功能更适合吧其他格式的文件转换成MP4吧。
经过进一步搜索,发现了ffmpeg这个神器,使用这个命令行的工具,最终完成了视频编码的转换,下面详细介绍一下转换的方法

安装并使用 ffmpeg

我使用的是Mac,并且安装了homebrew,所以可以直接通过homebrew安装ffmpeg

brew install ffmpeg
其实ffmpeg的指令有很多,想要详细了解可以参见ffmpeg参数中文详细解释,这里我只需要把一个其他编码格式的MP4文件转换成H.264编码的MP4文件,具体指令如下

ffmpeg -i input.mp4 -vcodec h264 output.mp4
自行替换input和output文件名就可以了,其实这里input文件还可以是其他格式的视频文件,ffmpeg可以自动识别转换的方式,非常便利!
经过上述转换,使用输出的文件在Chrome上播放就没有问题了

React Native打包Android APK安装包出错: Original is here. The version qualifier may be implied.

React Native项目,用命令打包Android APK安装包,执行命令gradlew assembleRelease后,总是报如下错误:

/Users/liujin/Downloads/xxx/android/app/build/intermediates/res/merged/release/drawable-mdpi-v4/androidjs_imagebag_pageonei_wkt1.jpg: error: Duplicate file.

/Users/liujin/Downloads/xxx/android/app/build/intermediates/res/merged/release/drawable-mdpi/androidjs_imagebag_pageonei_wkt1.jpg: Original is here. The version qualifier may be implied.

解决办法:

用Android Studio打开android目录,找到res/drawable目录,把里面的图片文件都删掉(因为这些图片都是React Native自动生成的,所以删除即可)。再次重新执行gradlew assembleRelease命令就不会报错了。

 

附:《React Native安卓项目打包APK》

shareSDK的菜单标题为英语

参考文章:http://www.jianshu.com/p/5b5c2293b11c

shareSDK的菜单标题为英语

解决:
一般语言是根据手机语言转换的.但是有时候也会遇到应用语言和本机语言不匹配的结果.这种情况下,这种情况下,可以通过下边图中方法解决。

React Native 0.32以下版本Xcode8报错解决办法

原文地址:http://reactnative.cn/post/2595

RCTSRWebSocket.m报错

Ignoring return value of function declared with warn_unused_result attribute

这个报错在此文件中有两处,代码

SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

修改为

(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

前面加上(void)

RCTScrollView.m 报错

Use of undeclared identifier ‘_refreshControl’; did you mean ‘refreshControl’?

@implementation RCTCustomScrollView
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  // 加入此行
}

React Native Network Request Failed解决方案

原文地址:http://blog.csdn.net/joyfixing/article/details/52535922

今天在用React Native写一个网络请求的demo时模拟器一直提示Network Request Failed,很是苦恼,百度搜索好久都没有找到我想要的答案,stackoverflow上有人说这个错误只在开发模式下出现,生产版本不会出现,但这根本没有解决问题。还有人说:如果使用fetch获取数据,用的是POST方法,注意headers要添加请求头。当请求为GET时不能用body,当为POST时必须包含body,设置头部之后就一切正常了。但我的fetch用的是GET方法不需要添加任何头,所以Network Request Failed的问题还没有解决。

为了防止代码出错,我直接复制了官方示例代码,如下

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson.movies);
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

居然还不行,我直接把这段代码放到浏览器console控制台运行,发现一切正常,控制台成功输出内容。那就有可能是iOS模拟器的问题了。

既然fecth api有问题那就换用XMLHttpRequest试试看,然后控制台输出了the resource could not be loaded because the app transport security policy requires the use of a secure connection,百度搜索下才发现是iOS9引入了新特性App Transport Security (ATS)。新特性要求App内访问的网络必须使用HTTPS协议,意思是Api接口以后必须是HTTPS。但是我的项目使用的是HTTP协议,现在也不能马上改成HTTPS协议传输。

还好有替代解决方案
1. 在Info.plist中添加NSAppTransportSecurity类型Dictionary。
2. 在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES

具体操作可以参考这篇文档iOS9 HTTP 不能正常使用的解决办法