I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.
Related
so I have a database with user uploads. Users can either upload images, or videos.
On an admin page, these videos/images should be diplsayed.
What works is the following:
<repeat group="{{#userUploads}}" value="{{#upload}}">
<div class="col-sm-4">
<video style="width:100%;" controls>
<source src="/{{#upload.path}}"/>
Your browser does not support the video tag.
</video>
<img src="/{{#upload.path}}"/>
</div>
</repeat>
Yes, I'm using Fat Free Framework, but doesn't change any behaviour here, so it doesn't really mind for the quesiton.
Now as mentioned, this works, but also displays both (working video and not working image or working image but not working video)... I've tried nesting the image into the video tag, however, this doesn't work either.
Is there any way I could reach the effect, that depending on the path (respectively the image filetype), I display the correct thing (image or video)? My only idea so far is checking the src of each tag with JS after creation and then hiding the thing, where the filetype doesn't match, however, this seems like a pretty ugly solution for me (first displaying everything, then checking for various filetypes, where I could forget things, etc.)
Use php exif_imagetype() function to test if it's a image. Although I would suggest to do it before storing to database.
I am trying to use Bootstrap carousel with videos. I have a list of videos of 5 sec. I need to auto-play them using this carousel.
Currently , Bootstrap plays the very first video but I also wish to automatically play all the others when they slide into the screen.
Example:
http://jsfiddle.net/wxMrf/20/
Code :
var $myCarousel = $("#myCarousel");
$myCarousel.carousel({
interval: 2000
});
I checked the fiddle you have created and you seem to embed the video in an iframe. Assuming you have the complete url of the video file resource available with you, you might want to try encapsulating them in a video tag supported by HTML5. It has an autoplay option associated with it and is supported in all major browsers today (upto IE8).
From W3Schools, you could try something like this in context of your code:
<div class="item">
<div class="container">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
<video controls autoplay>
<source src="foobar.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Ofcourse, using the video tag limits browser compatibility to some extent which is the whole purpose of using an iframein the first place. That's something you can decide. Also, if you are embedding videos from Youtube or Vimeo in an iframe, they almost certainly have an autoplay option in their videos. You should probably read up the relevant docs to get started on that. Hope this helps you out.
Try this:
$myCarousel.on('slid', function() {
console.log("Slide occur");
//play video
});
Note: I think you are using Iframe to play video, so for playing video using this function, you can simply reload Iframe src.
I have created the working jsFiddle, however while accessing 'video' element within iframe throws cross-origin-request security exception.
To overcome this start Chrome with following command,
chrome.exe --allow-file-access-from-files --disable-web-security
Open http://jsfiddle.net/wxMrf/21/ and see it working
Basically the solution is on the same line what 'Manwal' suggested,
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
Give this a shot:
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
I'm creating a simple metronome web app that also displays a random note for training purposes. It works fine on desktop, but on my iPhone (IOS7) there seems to be an issue with the multiple audio elements I'm using.
I'm using one sound for the first accented beat of the measure, and then a different sound for the rest of the beats. The two audio elements look like this:
<div id="audioHide" class="hide">
<audio id="beepOne" src="http://ivandurst.com/metronome/sounds/beat.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
<audio id="beepTwo" src="http://ivandurst.com/metronome/sounds/accent.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
</div>
JSFiddle and Live on my site
When I hit "play" on my iPhone in the jsfiddle, I hear the first sound every first beat, but it doesn't play the second sound for the rest of the beats. Everything else works perfectly. The reason I share both links is because it behaves different in the live environment - Sometimes it only plays the first sound every beat, sometimes it plays both sounds and works properly, and sometimes it says "The operation could not be completed" and/or plays nothing.
I'm not planning on selling this as an app or anything and it doesn't have to be perfectly accurate. I just want to share it as a web app with my friends who are trying to learn the notes on an instrument. Any thoughts on what's wrong here, or ideas for a possible workaround if it's a bug/known issue?
Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.
The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.
this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).