React Native-Webview:如何在全屏html中播放视频

时间:2018-12-17 11:00:49

标签: react-native react-native-web

我在React Native中使用Webview来显示html内容。有时html包含可以呈现视频的iframe。但是默认情况下,当我触摸视频中的全屏选项时

enter image description here

下面是我的视频示例HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div class="video-container">
        <iframe allowfullscreen="" border="0" class="ud_content_iframe_custom" frameborder="0" id="ud_content_iframe" scrolling="no" src="https://vdo.matichon.co.th/videos/public/iframe/d4d7f619a787a8c29e8f3c44324ffb1b/adaptive_hls/?post_id=1275310&amp;category=daily-column%2Cnews-monitor%2Cprachachuen%2Cfood-travel" style="width:100%;" width="100%"></iframe>
    </div>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

由于您使用的是iframe,请检查此线程。

issue#172