I've run into a strange problem with video playback on mobile - in general, the videos playback fine on phones, but if the same phone has visited the site more than a few times (say 4 or 5), the video will no longer play and instead display a still image. Here is the format of the HTML for the videos:
<video playsinline autoplay muted loop id="waterBackground" src="../assets/water1-forwards_compressed.mp4"></video>
There is one line of JS changing the video playback rate, but that's it:
$("#waterBackground")[0].playbackRate = 0.8;
All of the HTML videos use this exact format, and every phone I have tested this on (except iphone < 5) has no trouble playing the first the first few times. But things stop working after that. When I clear the browser history and close and reopen the app, the video is working again. Any ideas why this might be happening and how I can fix it?
Related
I've created a short animation, that I would like to implement into my website.
The animation is only a couple of seconds long and it has no sound.
I would like to implement it, like one would implement a GIF, meaning: I want it to autoplay, run in a constant loop and I don't want there to be any controls.
And so I rendered a GIF and for comparison I also rendered a .mp4-video and the .mp4 is far superior:
mp4: Looks exactly like I want it to look.
GIF: Even after splitting the frame-rate in half, the GIF-file is still about 5x larger then the .mp4 and it looks very noticeably worse.
So, of course, I'm implementing the .mp4 and this is how I did it: <video autoplay muted loop> – This works perfectly fine on desktop, but it does not work perfectly fine on mobile.
On Desktop it basically behaves like a GIF, but on mobile it does not autoplay and when I click on play it opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.
I want the video, on mobile, to also autoplay and I don't want the browser to open any sort of player, how can I do this? Or: Is this possible?
I really don't wanna work with a GIF, if possible. The .mp4 is just much better.
If this is not possible with CSS, maybe there is a JS-way?
I've tried it on a mobile device and it auto plays fine for me. Perhaps the playsinline attribute could help you out.
You should use the playsinline attribute for mobile devices if you don't want the video to start in fullscreen while playing.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
I would like to keep the poster gif displayed until the full video has loaded. It seems like this is not possible but does anyone else have a work around.`
<video id="wrVideo" controls poster="/images/busy.gif"
controlsList="nodownload" onerror="myFunction()" preload="auto" autoplay>
The gif loads but since chrome will start playing as soon as it thinks it has enough to play, I cannot manipulate this. I can check the buffered value at various times but not sure how I can implement this to only play the video when more than half of the video duration has buffered.
vid.oncanplaythrough = function() {
if(vid.buffered.end(0) < vid.duration){
vid.pause;
}
}
something like this but rather load the gif/spinner while the buffering reaches that point. Any ideas?
I finally figured this out and it involved a hack around chrome loading playable segments at a time. I forced the browser to download the entire video and then passed the blob url to the video source and voila, the preloader spins while the video is still loading which takes a while.
I am developing a video based timeline where each video will be played automatically while scrolling.
I'm only showing one video at a time when it scrolls into view, and then I'm removing DOM video node as it scrolls out and thats working perfectly fine.
{this.state.playing == key &&
<video autoPlay muted loop>
<source src={"/static/webm/videos/"+video.webm} />
</video>
}
The problem I have are slow networks, if a user has slow internet connection and keeps on scrolling every removed video they scrolled past even though no longer existing in the DOM tree continues to be downloaded which causes the website to very quickly come to a halt and waste my resources.
As you can see in here when I tested my site with dev tools and throttling enabled:
So my question is how do i stop video from being downloaded in the background after its been removed from the DOM before finishing the download?
If you use the built-in video support in the browser then there is no way to control the amount of data that's being buffered. It depends on the browser implementation and there is no API to control it.
Your best bet here is to use another player implementations which support these functionalities like dash.js, Bitmovin Player
I'm having a bit of difficulty understanding why this works in some cases but not in others.
My goal is to display the video, play it for 5 seconds, pause for 5 seconds, then continue playing.
I have put an alert so I can see if the pause function exists, which it does in every case I have tried (alert appears with "function", if it didn't exist it would say "undefined")
HTML
<video id="previewvid" width="320" height="240" autoplay="autoplay" controls="controls" poster="http://anotherwebsite/image">
<source src="http://anotherwebsite/video.mp4" type="video/mp4">
Video unavailable
</video>
JS
$(document).ready(function() {
alert (typeof document.getElementById('previewvid').pause)
document.getElementById('previewvid').play()
window.setTimeout(function(){
document.getElementById('previewvid').pause()
window.setTimeout(function(){
document.getElementById('previewvid').play()
}, 5000)
}, 5000)
})
Experience:
On my desktop machine this works perfectly in Chrome, but on Firefox I get a MIME type error, I am not too fussed by that as this will be used 99.9% on mobile anyway.
On mobile devices, I have an HTC One M7 with all software up to date. The video can be played in both Chrome and the built in browser, but does not autoplay. I have the same result on iPhone 6.
I tried on an old Samsung (not sure what model, but several years old) and found the same problem in Chrome, but on the built in browser the autoplay worked perfectly as required.
I've googled this problem extensively and there doesn't seem to be any obvious reason why the play/pause functions are not reliable.
Is there any other way I can get around this issue? Or any explanation as to why these functions are so unreliable? Or am I doing something completely wrong?
edit: I should add, the "anotherwebsite" is a CDN where I am paying for the availability of the videos, they have confirmed everything at their end is set up correctly
I have JW player installed on our site, once on the homepage, and once on our video page. All video's work on the homepage in ALL browsers. However, on the video page, when a video is played in IE, the video starts out correctly, then about 5 - 10 seconds in, the audio portion of the file starts playing a second time, over the top of everything. The original video and audio still play as well, along with the 5-10 second delayed second audio.
The strangest part is I use the same code on both the homepage and video page, I don't understand why it's doing this on only one of the two player instances.
http://www.timetoplaymag.com is the homepage, and the videos are hosted at timetoplaymag . com / video (sorry, it will only let me post 1 link, first time poster).
This current code is using the overlay hosted on longtailvideo.com, as I switched it to see if my own hosted overlay might have been the problem. It's not, as I'm still having problems even with the longtail overlay.
<script type="text/javascript">
var so = new SWFObject('http://video.anbmedia.com/player/player.swf','mpl','382','216','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&author=Time to Play&file=http://video.anbmedia.com/<?php echo $video_video; ?>&image=http://images.anbmedia.com/<?php echo $video_image; ?>&autostart=true&skin=http://www.longtailvideo.com/jw/upload/overlay.swf&backcolor=000000&frontcolor=FFFFFF&lightcolor=00528e&controlbar=over');
so.write('player');
</script>
I have the same problem.
The problem occurs because the player is loaded three times (at least in my case)
However if you set the 'autostart' option to false the other players will not get activated.
Video wont start in either page for me: "Done, but with errors on page". IE 8.0 Windows Vista 64 bit.