I have a UIWebView that contains a HTML5 video. The SRC of the video is dynamic, and uses HTTP Live Streaming. If, for whatever reason, the video cannot be played, the user is presented with the "play-with-a-slash-though-it" icon, indicating it cannot be played. I'd like to handle this situation by hiding the video player and presenting a message to the user instead. Are there any callbacks that I can subscribe to that will allow me to achieve this?
UPDATE
Thanks to codeghost's answer, I was able to resolve my problem. However, I thought it would be useful for future readers to see a code example:
<html>
<body>
<video id='video' width='640' height='480' controls='controls' preload='none' autoplay='autoplay'>
<source src='http://some.video.com'/>
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var video = document.getElementById('video')
video.addEventListener('error', function(event) {
if(event.type == "error")
{
alert("There was an error getting the video.");
}
}, true);
</script>
</body>
</html>
You could do this in the web page by adding a javascript handler for error event on the video tag.
Related
I'm at the end of my rope with a certain issue of my videos not playing on my iPhone 6 browsers (Safari and Chrome) and certain ipads. It works great on desktop browsers, Android Chrome and even my iPad mini in Safari. I've researched this for a while now, including Stack Overflow but everything I've tried still doesn't play the video on my iPhone (only shows the initial frame image). Here is my video test page where I'm making edits, my code below and what I've tried to fix it based on research:
<section id="video-wrap">
<video class="video <?php the_field('header_video_class'); ?>" autoplay muted loop>
<source src="/video/<?php the_field('header_video'); ?>.mp4" type="video/mp4">
<source src="/video/<?php the_field('header_video'); ?>.ogg" type="video/ogg">
<source src="/video/<?php the_field('header_video'); ?>.webm" type="video/webm">
</video><!-- /video -->
<div id="video-wrapper">
<div class="video-caption">
<?php the_title(); ?>
</div><!-- /content -->
</div>
</section>
I've tried adding the controls parameter back in, no luck
I've tried adding the video source within the video tag and removing the additional source tags, no luck
I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
I've tried removing the video caption overlay in case that was conflicting. No luck.
WHAT AM I MISSING? Thanks in advance for any help!
New Answer (working) :
Well I somehow missed this one little detail "only shows the initial frame image". I've misread the Question as "video does not even try to work" (because it can happen with some models/brands vs H.264 codec).
Acoording to this blog aticle : html5 Video Autoplay on iOS and Android...
Your code should look like (also use low-res MP4 version) :
<video class="video" playsinline autoplay muted loop>
Finally also check : Webkit policy for video section. Maybe it'll be useful to trick the machne.
Older Answer :
I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
Your H.264 video is encoded with incompatible Profile : High # Level 3.0.
Solution : Re-encode with choosing Main # level 3.1 (also can try level 4.0).
Since no iOS hardware here, test these re-encode :
Main profile #L3.1 : clip-intro-low_v2.mp4
Baseline profile #L3.0 : clip-intro-low_v3.mp4
PS: You may have a similar issue to this Question (in case it's useful to you).
There is a trick to load a video tag in the safari browser. We simply just need to reload the page where the video tag is placed.
And to reload the page we can use this code
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
}
else {
// Check if video tag exists
if (jQuery(document).find('.hero-slideshow .hero-media-wrap video').length > 0) {
if (window.location.href.indexOf('reload') == -1) {
window.location.replace(window.location.href + '?reload');
}
}
}
}
This might not be a permanent solution but we can use this code as quickfix.
setTimeout(function (){
$('.hero-slideshow .slides .hero-mp4 video').once().each(function(){
$(this).parent('.hero-mp4').show();
$(this).get(0).play();
});
}, 2000);
Add source to the video tag and add this attribute too.
preload="auto"
<video width="100%" height="100%" loop muted playsinline preload="auto" class="hero-video media-document mac video">
<source src="VideoSrc" type="video/mp4"></source>
</video>
Taking a look at the YouTube iFrame API, there appears to be no existing call or state that indicates whether or not a user is trying to skip to some point in a video. Ideally, in my implementation I would either like to disable YouTube controls entirely (which is apparently difficult to do from the perspective of browser-compatibility) or detect when a user is trying to skip, and return him to the point in the video before the attempt to skip was made.
Is there any good way to do this?
If you'll be disabling the controls in the iframe, try using the control = 0.
<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/?controls=0&list=PLeCdlPO-XhWFzEVynMsmosfdRsIZXhZi0&listType=playlist"
frameborder="0" allowfullscreen>
For customize player control, try using this tutorial - How to Control YouTube's Video Player with JavaScript.
For example, playback control (Play and Pause):
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});
Hope this help.
Simple HTML5 video plays on safari browser. but after adding it to home screen(Standalone WebApp), it doesn't work. It is working on iOS7 but stopped working on iOS8.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>HTML5 Video Standalone Test</title>
<style>
body{
margin:0;
}
</style>
</head>
<body>
<video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" autoplay="autoplay" controls="true" webkit-playsinline />
</body>
</html>
Please help. Is there any solution for this?
Video playback is broken on standalone applications in IOS 8.0.2
Looks like iOS 8.3 fixes this issue. I have a standalone web app that uses an audio element, and it's working as expected now. FINALLY!
Confirming
Packaged cordova App cannot load video
Added:
<preference name="AllowInlineMediaPlayback" value="true"/>
to config.xml and
webkit-playsinline
to the video element.
The UI says video is Loading, while video.networkStatus remains 2 (NETWORK_LOADING) and video.readyState 0 (HAVE_NOTHING)
Safari playback works
Home screen launcher playback does not work
For the same webapp that worked in ios Safari, the homescreen version does not play videos either, and crashes the webapp when trying to change the source of the video.
I don't like apple :|
I have two apps that use HTML5 video. One stopped working, the other not. There were two differences:
The one that still works added the source tags to the video tag AFTER adding the video tag to the DOM.
The app that still works has autoplay set to false (<video autoplay="false">...</video>)
The first one made no difference, the second one made the app work again.
I think I found a workaround for the audio not working. I can't really explain why this fix is working, but it is.
Here's what my old code looked like:
// Create the audio tag
var sprite = document.createElement('audio');
var id = document.createAttribute('id');
id.nodeValue = 'audio_sprite';
var src = document.createAttribute('src');
src.nodeValue = 'my-audio-sprite.mp3';
sprite.setAttributeNode( id );
sprite.setAttributeNode( src );
// Add it to the DOM
var body = document.getElementsByTagName('body')[0];
body.appendChild( sprite );
// Play/Pause to load the audio.
sprite.play();
sprite.pause();
Here's what I'm doing now.
// Grab an existing DOM element and create an audio tag.
var body = document.getElementById('hover');
body.innerHTML += '<audio id="audio_sprite"><p>Audio not supported</p></audio>';
// Apply the SRC to the audio tag.
// Q: Why don't we just do that in the step above?
// A: I'm not really sure why, but iOS8 doesn't like it. Sorry this is so ugly.
var sprite = document.getElementById( 'audio_sprite' );
sprite.src = 'my-audio-sprite.mp3';
// Once the metadata is loaded, call play/pause so we can play the audio later.
sprite.addEventListener('loadedmetadata', function() {
sprite.play();
sprite.pause();
});
In my mind, both should work however, in practice, only the second one does for iOS8. I hope this helps someone.
I got this working by finding the video element, then creating a source element in script (not in the html) - strange I know:
var video = document.getElementById('theVideo');
var source = document.createElement('source');
source.src = fileLocation
source.type = "video/mp4"
video.appendChild( source );
video.load();
I also accept this is an old issue, but I came across it as I was testing on an iPad that has iOS 8.0.2 installed and it caught me out for a day.
It appears that neither volume controls nor mute/unmute work on iPad. Did anyone encounter this problem before? Pretty straightforward functionality, no errors, just silent fail.
var player;
$(document).ready(function () {
player = new MediaElementPlayer('#player', {});
});
function mute() {
player.setMuted(true)
// player.setVolume(0) does not work either on iPad
}
function unmute() {
player.setMuted(false)
}
HTML:
<audio id="player" controls="controls">
<source type="audio/mp3" src="intro.mp3" /> </audio>
Nevermind. Since MediaElement.js uses native <audio> controls on iPad, according to Safari HTML5 Audio and Video guide, it is not possible to control HTML5 audio volume via script:
On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
... need to program a workaround for iPads.
I am using backbone.js to replace content on a page. After backbone places the new content I call a JW Player script to create a video (Flash normal web, HTML5 video tag on iOS).
When I play one video, stop that video, use backbone to replace the video, click to play the new video... the new video just has a spinner and won't play. (this only happens in iOS devices)
Has anyone had this issue that knows what might be happening and how to fix it?
This content is getting updated via backbone.
<div class="media-wrapper">
<div class="media-holder"><div id="media"></div></div>
</div>
This function is being called after backbone and creates the video on the div above.
function create_video(url,w,h,thumb)
{
jwplayer('media').setup({
flashplayer: '/api/js/jwp/player.swf',
skin: '/api/js/jwp/video.zip',
wmode: 'opaque',
image: thumb,
file: url,
height: h,
width: w
});
}
I am pretty sure it is not JW Player, but something to do with iOS and how it handles html5 videos.
This is a known bug[1] with using the same div and calling setup multiple times. The forum post linked to from the bug has the simple workaround of incrementing your div id each time you call setup.
[1] http://developer.longtailvideo.com/trac/ticket/1615