I'm loading up multiple videos into one video object inside a webview of an ios app. After viewing a couple of videos, the app would crash, assuming from memory leaking. I'm looking for a way to properly dump the stream or destroy the previous video when video is paused and closed, or before loading up a new one. Any help would be much appreciated:
<video class="videoPlayer" preload="auto" controls="controls">
<source src="" type="video/mp4" />
</video>
function LoadNewVideo() {
video = document.getElementsByTagName('video')[0];
video.src = "assets/vids/vid" + vidSelect + ".mp4";
video.load(); // need this for the new video to load
video.play();
}
function StopVideo() {
video.pause();
// kill current video here
// i've tried the following codes but didn't work
video.src = '';
video.load();
}
Related
Reproduce
Playing m3u8 playlist
After that, I stop streaming by cut the signal.
=> Player stop but don't fire error event.
I can't catch that error to handle.
Many thanks for the comments, everyone!
Here is my code
<!DOCTYPE html>
<html>
<body>
<h1>The video autoplay attribute</h1>
<video id="VIDEO" width="320" height="240" controls autoplay playsInline/>
<script>
const linkPlay = "https://sgn-fpt-001-livecdn-vt.vieon.vn/7ed4de9c6e5740688d95878c8bd5a766/1654246367317/dvr_event/60b822a4-ef69-4886-b942-351ab352779a/playlist.m3u8"
function init() {
const video = document.getElementById("VIDEO")
console.log(video)
console.log(video.canPlayType('application/vnd.apple.mpegurl'))
video.src = linkPlay
video.load()
video.addEventListener('error', (e)=> {
console.log('error', e)
})
}
init();
</script>
</body>
</html>
These are issue's image
P/s: If you need to debug, you can pm me and I will play the playlist.
Regard
I've seen numerous questions with people having troubles with implementing video streaming for iOS and Safari. I have tried implementing all of the common pitfalls that I have read about in other questions, but I have not been successful.
I am trying to stream a video from an ASP NET Core 3.1 controller. This works completely correctly in basically every browser, except on iOS and Safari, for which the video just doesn't load (the player just shows a timebar with length 0:00).
I have shown the controller action and the view that I am using to stream the video below. As you can see, I have added EnableRangeProcessing, set the content length and added the playsinline attribute, which are all the main issues people talk about with iOS and Safari.
Can anyone see any other potential problem here?
public async Task<ActionResult> StreamVideo(int id)
{
var range = HttpContext.Request.GetTypedHeaders()?.Range?.Ranges.FirstOrDefault();
Stream data = await _service.DownloadVideo(id);
if (range is null) Response.ContentLength = data.Length;
else
{
Response.ContentLength = (range.To.HasValue ? range.To.Value + 1 : data.Length) - (range.From ?? 0);
}
return new FileStreamResult(data, "video/mp4") { EnableRangeProcessing = true };
}
<video style="max-height:100%; max-width: 100%;" controls="controls" preload="auto" playsinline>
<source src="#Url.Action("StreamVideo", "Attachment", new { Id = id })" type="video/mp4">
</video>
I’m seeing a local video fail to load on iOS only. It only happens after loading the same page several times by navigating to and away from the page. The first 10 or so times the video loads fine, and then will fail with media error 3 (see here: https://developer.mozilla.org/en-US/docs/Web/API/MediaError). After it happens no videos will play anywhere else in the app until it is reloaded.
I’m on iOS 11.4, ionic 3. Anyone have any ideas?
HTML:
<ion-content class="ion-content--pulldown-bg">
<div class="ion-content-wrapper">
<video id="vid" loop preload="metadata" playsinline autoplay muted>
<source src="assets/videos/dummy_video.mp4" type="video/mp4" />
</video>
</div>
</ion-content>
Typescript:
ionViewDidLoad() {
this.videoElement = document.getElementById("vid") as HTMLMediaElement
this.videoElement.onerror = () => {
alert("Error " + this.videoElement.error.code + "; details: " + this.videoElement.error.message)
}
I found a solution that worked here: MEDIA_ERR_DECODE on HTML5 video in iOS UIWebView after many plays
The hardware decoder buffer didn't remove the videos after the page was unloaded, you have to do it manually.
Ionic solution:
ionViewWillUnload() {
// Clear the videos from the decoder buffer.
// Buffer fills up on iOS when multiple videos are loaded
const elements = document.getElementsByTagName("video")
for (let i = 0; i < elements.length; i++) {
elements[i].src = ""
elements[i].load()
}
}
I'm building phonegap app and I need to play video in it. I know in order to play video on Android, I need to use one of the plugins available, but to play video on iOS, I can use HTML 5 video tag. I have these lines of code:
<div id="video">
<video id="video01" width="300" height="300" controls>
<source src="images/test2.mp4" type="video/mp4" />
</video>
</div>
I can see "video box", but I cannot play video for some reason. In console I don't see any errors.
Video I'm using is from this page: http://www.quirksmode.org/html5/tests/video.html
And in iPhone Safari I can load MP4 version from that page without any problems.
I know it has been a while, but I was looking at some of my old questions, and I've noticed that I completely forgot to post solution to my problem.
In the end I've managed to fix the issue using Cordova File api, and solution looks smth. like this:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
console.log("gotFS");
getFolder(fileSystem, "video", function(folder) {
filePath = folder.toURL() + "\/" + "videotest.mp4";
playVideo(filePath);
}, function() {
console.log("failed to get folder");
});
},
function() {
console.log("failed to get filesystem");
});
function playVideo(uri) {
var player = document.getElementById("videoPlayer");
var source = document.createElement("source");
source.src = uri;
source.type = "video/mp4";
player.appendChild(source);
player.load();
}
I have an iPad app developed using a 3rd party tool called OpenPlug which converts AS3 to C++ and from there on exports to iOS. (Just wanted to note this is not a "native" app using Obj-C in XCode written by me, I wrote AS3)
Now I have this iPad application which displays pictures and video in a slideshow. For the video I'm using a WebView which loads a HTML page where I change the src property of the video object to the location of the video file which was downloaded to my application storage. This is working fine except that the application freezes when it is running for a few hours (3-6).
I searched for this problem and tried the solution in iOS Safari memory leak when loading/unloading HTML5 <video> but that does not seem to change anything for me.
Since the application freezes (right before the HTML page needs to load a video) and does not crash what does that mean? Do I need to destroy the video object? First I was creating a new WebView for each video but now I'm reusing the webview and just changing the src property but that also does not help me.
Can anyone shed some light on this? OpenPlug has discontinued it service and does not offer any support anymore but nevertheless I think it is more of a webview/video problem on iPad (?)
Important to note: The application is freezing but my iPad is not. The application does not generate a crash report and does not execute any code anymore (also no traces). When I push the Home button on my iPad and press the app icon then the application is restarted.
Here is the code of my HTML page which is refreshed every time a new video needs to start (webview.location = ...)
<html>
<head>
<script>
function videoEndedHandler(){
var video = document.getElementById("videoPlayer");
video.src = "";
video.load();
window.location.hash = "ended";
}
function videoErrorHandler(){
window.location.hash = "error";
var video = document.getElementById("videoPlayer");
video.src = "";
video.load();
}
var loop;
function setup(){
var video = document.getElementById("videoPlayer");
video.addEventListener("error", videoErrorHandler,false);
video.addEventListener("ended", videoEndedHandler,false);
video.load();
video.play();
startHashLoop();
}
function startHashLoop(){
if(window.location.hash == "#touched"){
setAsPaused();
}
if(window.location.hash == "#paused"){
//check image
testImage("shouldResume.png?nocache=" + Math.random());
}
if(window.location.hash == "#resume"){
var video = document.getElementById("videoPlayer");
video.play();
}
loop = setTimeout(hashLoop,500);
}
function testImage(url) {
var img = new Image;
img.addEventListener("load",isGood);
img.addEventListener("error",isBad);
img.src = url;
}
function isGood() {
window.location.hash = "resume";
}
function isBad() {
//alert("Image does not exist");
}
function hashLoop(){
startHashLoop();
}
function setAsTouched(){
window.location.hash = "touched";
}
function setAsPaused(){
var video = document.getElementById("videoPlayer");
video.pause();
window.location.hash = "paused";
}
</script>
</head>
<body onload="setup();" style="background-color:#000000;">
<video id="videoPlayer" style="top:0;left:0;position:absolute;" width="100%" height="100%" preload="auto" src="##VIDEO_URL##" autoplay="autoplay" webkit-playsinline />
</body>
</html>
It would be helpful if you'd post your entire code, but I think it's freezing because you're loading a video from web in your main thread, which is also responsible for redrawing UI. By loading a large video inside your thread, your UI freezes as well.
I would recommend moving the code that does video loading into a separate thread (use blocks if you're on iOS5).