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
Related
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'm afraid im having the same probem as this unasnwered question.
I have a blank IFRAME In my cordova ionic IOS App for embedded YouTube videos.
I change the NG-SRC="" of iframe by clicking Next Video. But upon testing it appears that the phone/cordova/webview is caching the old content of the iframes. I can only get through 20 videos or so before crashing out of memory.
I have tried using angular.element.remove() to remove the iframe as well as setting the iframe src to blank first, and neither seemed to affect how much memory is in use, per Xcode. I've also tried the cordova plugin ClearCache and that didnt clear any memory either.
Please help! Is there a better way to embed youtube in a cordova app?
I have spent weeks working on this all to have it crashing down around me (no pun intended)
My Video view is like:
<ion-view view-title="Random Video">
<iframe id="youtube" sandbox="allow-scripts allow-same-origin" ng-src="{{video.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>
<h4>{{video.title}}</h4>
<button ng-click="nextVideo()">
</ion-view>
My controller is like:
angular.module('starter.controllers')
.controller('VideoCtrl', function(VideoService) {
$scope.video = {};
$scope.nextVideo = function() {
$scope.video = null; //doesnt seem to help
//$scope.$destroy(); //doesn't help
//angular.element(document.querySelector( '#youtube' )).attr("src", " ");
//angular.element(document.querySelector( '#youtube' )).remove();
//neither of the above 2 remove any memory
VideoService.getVideo().then(function(response){
$scope.video = response.data;
});
}
$scope.nextVideo();
});
Note, when I load my app onto a website instead, and load in chrome, I can cycle through videos without seeing the memory usage go up (looking at taskmgr.exe at least)
It might seem like setting the iframe to an empty string should be enough, but for some browsers and some situations it isn't. It might be necessary to recursively delete event listeners and elements one by one. Maybe surprisingly, the recursive method (1) below is faster than just setting to an empty string (2):
1.Recursive
while (box.lastChild) {
box.removeChild(box.lastChild);
}
2. Setting empty string
myNode.innerHTML = '';
See https://stackoverflow.com/a/3955238/1158376 for reference.
Additionally, in the recursive approach, one might need to apply special treatment to some items, for example first remove event listeners, nullify functions (http://javascript.crockford.com/memory/leak.html), and use dedicated cleanup methods, like with jQuery (http://javascript.info/tutorial/memory-leaks).
Another strategy you could try is to load a new web page with a fresh iframe for every video you play. Loading a new page should enable the browser to release the previously claimed memory.
I'm inserting a youtube video on my website.
I customized everything I could so it wouldn't look like a youtube embed. And made it loop.
Now this weird playlist thing is appearing once the video loops.
How to remove it?
Iframe code:
<iframe width="426" height="319"
src="http://www.youtube.com/embed/hhLt3p01phg?&autoplay=1
&rel=0
&fs=0
&theme=light
&loop=1
&showinfo=0
&disablekb=1
&controls=
0&autohide=1
&playlist=hhLt3p01phg" frameborder="0" allowfullscreen></iframe>
Just for reference.
What you need is:
The video url: http://www.youtube.com/watch?v=z8GHf-aELjY
The embedded video url: http://www.youtube.com/embed/z8GHf-aELjY
Note: The above url is taken from the demonstrated website.
Now, update the iframe src attibute with to the following:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/z8GHf-aELjY?rel=0&showinfo=0"
frameborder="0"
allowfullscreen>
</iframe>
Notice how I added the rel=0&showinfo=0 at the end of the src attribute of the iframe element.
From the YouTube API Documentation:
rel: This parameter indicates whether the player should show related
videos when playback of the initial video ends. Supported values are 0
and 1. The default value is 1.
And for
showinfo: Supported values are 0 and 1.
Setting the parameter's value to 0 causes the player to not display
information like the video title and uploader before the video starts
playing.
If the player is loading a playlist, and you explicitly set the
parameter value to 1, then, upon loading, the player will also display
thumbnail images for the videos in the playlist. Note that this
functionality is only supported for the AS3 player.
The demonstration can be found at this website
It' just a bug in the player. I've reported the issue to the development team, but until it's fix you could try using the chromeless player.
https://developers.google.com/youtube/flash_api_reference#GettingStarted
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!
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/