解决了！如何在我的 nativescript 应用程序中实现视频播放？答案

【问题标题】：SOLVED ! how do i implement videoplayback in my nativescript application?解决了！如何在我的 nativescript 应用程序中实现视频播放？
【发布时间】：2019-12-17 08:02:41
【问题描述】：

我使用 nativescript-videorecorder 录制视频并从 nativescript-videoplayer 插件保存的文件中播放它。在 iOS 中它像梦一样工作，但在 android 中，我最多只能实现黑屏（只有在我使用 exoplayer 时才会有声音）。我有最新版本的 nativescript 和插件。我的项目使用 webpack。在网上找到的示例，链接到提到的插件，也不起作用。任何人都可以解决这个问题吗？

function takeVideo()

{ 变量选项 = { 保存到画廊：假，持续时间：10，尺寸：300，高清：错误，解释： '' }

 var permreq = [];
if(isAndroid) permreq = [android.Manifest.permission.RECORD_AUDIO, android.Manifest.permission.CAMERA];    
permissions.requestPermission(permreq, "Uw toestemming is nodig om video-opnamen te kunnen maken.")
.then(function () 
{     
    permissions.requestPermission([android.Manifest.permission.READ_EXTERNAL_STORAGE,
        android.Manifest.permission.WRITE_EXTERNAL_STORAGE], 'We hebben toegang tot het bestandssysteem nodig om uw bestand op te slaan').then(function () {
        var videorecorder = new vr.VideoRecorder(options);
        videorecorder.record(options).then(data => {
            // get file from data here
            }
        }).catch((err) => {
            console.log(err);
        });
    });
});

} export.takeVideo = takeVideo;

ios 中的播放效果很好。对于 android，我无法让我保存的 mp4 文件正常工作，而且下面提到的 url 也不会在显示器上呈现图片。

 <StackLayout   id = "zoomvideo" className="collapse"  height = "100%" verticalAlignment="top">  

                                            <VideoPlayer:Video height="100%" row="1"   
                                            loaded="videoplayerLoaded"  
                                            src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" 
                                            finished="videoFinished" controls="true" 
                                            autoplay="false"  id = "vidplayer" fill = "true" />     </StackLayout>

【问题讨论】：

您是否在录制时指定format？能贴出相关代码，录制回放吗？
我已将代码添加到我的帖子中。任何见解表示赞赏

标签： android video nativescript

【解决方案1】：

我解决了这个问题...在 Android 清单中，android:hardwareAccelerated="false" 导致了这个问题。通过将其设置为 true 来解决这个问题会带来一个新的（影响较小的）问题。我现在在一些背景透明的元素中有阴影......这是因为将hardwareAccelerated设置为true，我使用的z-index创建了不需要的高度。我从来没有注意到这一点，因为海拔不适用于 hardwareAccelerated=false....

【讨论】：