I'm working on a Sencha Touch ipad app which pulls content from a JSON feed. The JSON contains some images, plus some video URLs from Youtube and Vimeo.
Where do I start trying to play embedded video in the app?
A few weeks on from my original question, I have a few tips to share on this topic.
We've built an app quite similar to the Sencha Touch demo app Touchstyle. One difference was we wanted to display videos as well as images referenced in our JSON feed.
Our JSON looks something like this for a single item of media, which could be of type image or video:
"Media": [{
"id":"28542",
"title":"mirrortrackmovie",
"type":"video",
"thumb":"http:\/\/i.ytimg.com\/vi\/X-z3_-7pwZ0\/default.jpg",
"video_host":"youtube",
"video_id":"X-z3_-7pwZ0",
"video":"http:\/\/www.youtube.com\/v\/X-z3_-7pwZ0"
}]
In order to embed Youtube and Vimeo videos in Sencha Touch, you have to use the iframe embed code that both sites provide. The following XTemplate inserts the correct video_id into the relevant embed code, depending on where the video is hosted.
tpl: new Ext.XTemplate(
'{[this.renderMedia(values)]}',
{
renderMedia: function(media) {
if (media.video) {
if (media.video_host == 'vimeo') {
return '<div class="video vimeo"><iframe class="vimeo-player" type="text/html" width="640" height="385" src="http://player.vimeo.com/video/'+media.video_id+'?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe></div>';
} else {
return '<div class="video youtube"><iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/'+media.video_id+'" frameborder="0"></iframe></div>';}
}
}
}
}
)
By and large this method has worked fine, although we did experience some problems to do with loading video in a buffered carousel (a topic for another question).
You can start by looking into the Sencha Touch Kitchensink : Media > Video Example
http://dev.sencha.com/deploy/touch/examples/kitchensink/
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.
I have used PrimeFaces for playing a youtube video from url.But there is a problem in this tag.Some of the youtube links are playing but some of them are not playing.For example;
this video is playing but this video is not playing.Here is the code;
< p : media value = "http://www.youtube.com/watch?v=mqOo7cYCBAo" width="600"
height="400"
player="flash"/>
you need to check the link. The video link which it plays has some modifications. Its not exactly the same as the one you're trying to play.
https://www.youtube.com/v/KZnUr8lcqjo
https://www.youtube.com/watch?v=mqOo7cYCBAo
Observe the strings after .com
You need to replace the string in proper format to make it play.
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
I am trying to Autoplay an mp3 file using html5 on ipad but its not working
Here is my code
<audio src="1.mp3" autoplay="" controls="" onended="this.play()"></audio>
The iPad does not support autoplaying of video and audio files. This is a design decision.
I found a way to auto-play video. I think is working on audio, also.
It works if you append/empty every time the video element from the div.
function addListeners()
{
// loop for each list item
$('#mscroll li').each(function looping(index)
{
// onclick...
$(this).click(function onItemClick()
{
// empty left column and description
$("#divplayer").empty();
// append video tag
$("#divplayer").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[index].mp4+'" autoplay/></video>');
$('video').get(0).play();
});
});
}
I have tested this on my Ipad, iOS 5.1.1
Here is a pretty detailed overview of mobile audio and tricks to make it work, created in 2013, so quite recent:
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/
Good luck!