Issue
I am using expo-react native to build an application to play videos dynamically but sometimes only audio is playing but no video. I have to tap on the screen to see picture. In Android TV it works well but not on mobile devices. I don't know what to do now.
I tried passing every prop I could but still only mobile devices show this problem. Is there any way to solve this issue?
<WebView
style={styles.container}
originWhitelist={["*"]}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
javaScriptEnabled={true}
domStorageEnabled={true}
allowsFullscreenVideo={true}
mixedContentMode='always'
androidLayerType="hardware"
androidHardwareAccelerationDisabled={false}
mediaPlaybackRequiresUserAction={false}
source={{
html: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background: #000;
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<video id="myVideo" autoplay muted></video>
<script>
var videoSource = new Array();
videoSource = ${JSON.stringify(vid)};
var videoCount = videoSource.length;
var elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
document.getElementById("myVideo").setAttribute("src", videoSource[0]);
function videoPlay(videoNum) {
document
.getElementById("myVideo")
.setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document
.getElementById("myVideo")
.addEventListener("ended", myHandler, false);
var incr = (function () {
var i = 0;
return function () {
if (i > videoCount - 1) {
i = 0;
}
return i++;
};
})();
function myHandler() {
videoPlay(incr());
}
</script>
</body>
</html>
`,
}}
/>```
Solution
I found A quick solution to solve this bug from webview. Just add css styling for video.
You need to enable controls in video tag first.
<video id="myVideo" autoplay controls></video>
then have to add this code in css.
video::-webkit-media-controls {
opacity: 0.01 !important;
}
if it still doesn't work then try to remove autoplay attribute from video and play manually using javascript.
const video = document.getElementById("myVideo");
video.play();
Answered By - Rishabh Garg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.