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
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'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?
I'm a web developer at a radio broadcaster. Since the release of IOS 11, we received several user complaints that our audio live streams can't be played on IOS 11 devices anymore. To embed the streams in our websites we use the HTML5 AudioElement. When debugging the javascript on an iPhone whit IOS 11 we recognized that calling the audio elements play() method resulted in a MediaError of ErrorCode 4 (MEDIA_ERR_SRC_NOT_SUPPORTED). All other devices (Android, Windows and IOS 10 and below) play the streams without any problem.
I created a little codepen example
<audio controls>
<source src="http://hr-hrinfo-
live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3"
type="audio/mpeg;codecs="mp3"">
Your browser does not support the audio element.
</audio>
https://codepen.io/ampersand83/pen/pWwgKm in which I just create an AudioElement via the AudioTag and hand the source Tag one of our stream URLs.
Devices running IOS 10 and below play the streams without any problem as well as current android or windows devices. However, a device running IOS 11.0.1 can't play the stream. I can't find any information on why this wouldn't be possible anymore. Does anybody have an idea why our streams won't work anymore and can give us advice on what we can do to make them work again?
This issue is down to Apple WebKit changing in the latest iOS release. For users running KH Icecast a fix can be expected soon (hopefully!) https://github.com/karlheyes/icecast-kh/issues/172
Adding a simple audio control like this
<audio controls>
<source src="https://swr-swr3-live.sslcast.addradio.de/swr/swr3/live/mp3/128/stream.mp3" type="audio/mpeg;codecs="mp3"">
</audio>
…does not play.
While this one does:
<audio controls>
<source src="http://mp3-live.swr3.de/swr3_m.m3u">
</audio>
The only difference I can spot is that on an MP3 it fails while a M3U playlist works.
On iOS 10 and below as well as on current macOS Safari, it works both.
Also Chrome on iOS 11 fails (same Webkit engine?!)
I saw this same issue when trying to load a local HTML file with audio controls into a UIWebView. However, my file was an .m4a audio file. I found that just removing type did the trick. So my HTML looked like this:
<div class="audio"><audio controls><source src="my_local_audio_file.m4a"></audio></div>
Using type=audio/mp4 also worked for me. So I'm guessing it's an incompatible mime type and just removing the type would be the best option.
Hope this helps.
I have the following HTML code, but it is not working, the video does not start...
Yet, when I test this code in my browser Chromium, it works perfectly.
Any idea of the problem?
<video width="576" height="324" controls poster="">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag or the file format of this video.</video>
My video is playing fine using your code(in chrome) without giving any troubles so, the problem is with the video you are playing but not the code.
due to Chrome removing support for h264, on some machines(it entirely depends upon the codecs installed on the computer), mp4 videos encoded with it will not work under certain circumstances these issues with video encoding formats in chrome leads the code to not working perfectly.
there are a couple of solutions in stackoverflow you can give a try:
MP4 not playing on Chrome version 27.0
html5 video issue with chrome
cheers!
We ran into a very strange problem with JW Player and really don't know an approach to solve it.
JW Player shows the error:
Error loading media: File could not be played
sporadically across all browsers and platforms (sometimes it shows up and sometimes not). It took me over 30 reloads to get it and some of my colleagues got it with their first try. It's behavior is very inconsistent and kind of random.
We're using FirstSpirit as CMS on an Apache Tomcat instance running on Windows server. The problem occurred on Chrome, IE and Firefox across all versions.
The MIME types of all videos are correct as their codecs are. If supported, JW Player is running in HTML5 mode. We use Flash only for older browsers (IE8 groan).
I would appreciate any help. Thanks!
Marcus
UPDATE:
Example page with video box on the right side. Example page with video
UPDATE:
We updated the version as Ethan from JW Player suggested, but it's still not working properly.
I would suggest to encode the video in .mp4 and .ogg. (MP4 is supported in Safari and IE9, Ogg in Firefox, Chrome and Opera and as you mentioned IE6-8 uses flash only). Thus your video element will look something like:
<video width="300" controls>
<source src="my_video.ogg" type="video/ogg">
<source src="my_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
This will ensure that the video will be played if the browser support HTML5. I hope this helps