MediaElement (version 2.16.4) iframe fullscreen video issue - firefox, IE11 - firefox

I'm using mediaelement.js version 2.16.4 to load video in an iframe created by thickbox.js. When I try to click fullscreen button in firefox-37.0.2/IE-11 the video goes to fullscreen but immediately goes back to smaller size of the iframe. If I don't initialize mediaelement and only the HTML5 tag then the fullscreen works fine in an iframe. So, it has to do something with the mediaelement player. This doesn't happen in Chrome! Can anybody guide me here why this is happening and how it can be resolved?
FYI: I have "webkitallowfullscreen mozallowfullscreen allowfullscreen" in the iframe.
<video id="videoPlayer" width="100%" height="100%" controls="controls" preload="none" autoplay="true">
<source type="video/mp4" src="<%=Url%>" />
</video>
$(document).ready(function() {
if ($('video')) {
var player = $('video').mediaelementplayer({
videoWidth: '100%',
videoHeight: '100%',
// initial volume when the player starts
startVolume: 0.8,
// enables Flash and Silverlight to resize to content size
//enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
isNativeFullScreen: true,
success: function (mediaElement, domObject, player) {
mediaElement.addEventListener('ended', function () {
player.exitFullScreen();
}, false);
}
});
}
});

I found the issue of fullscreen in firefox/IE. It's the following code in mediaelement-and-player.js where there is a manual exit from fullscreen. For me the 'zoomMultiplier' variable is 1.25 which is causing the problem. I can comment this code but not sure if it breaks other scenario? -
if (t.isInIframe) {
// sometimes exiting from fullscreen doesn't work
// notably in Chrome <iframe>. Fixed in version 17
setTimeout(function checkFullscreen() {
if (t.isNativeFullScreen) {
var zoomMultiplier = window["devicePixelRatio"] || 1;
// Use a percent error margin since devicePixelRatio is a float and not exact.
var percentErrorMargin = 0.002; // 0.2%
var windowWidth = zoomMultiplier * $(window).width();
var screenWidth = screen.width;
var absDiff = Math.abs(screenWidth - windowWidth);
var marginError = screenWidth * percentErrorMargin;
// check if the video is suddenly not really fullscreen
if (absDiff > marginError) {
// manually exit
t.exitFullScreen();
} else {
// test again
setTimeout(checkFullscreen, 500);
}
}
}, 500);
}

Related

How to start a HTML 5 video from a particular position in laravel 5

i new start a video in a specific position when the web is loading, i get the position using a eloquent var coming from the controler.
I also use jquery for other functions in the same view.
I have checked the variables arrive correctly so I do not know where is the error.
The strange thing is this method only works if I show a alert popup before in firefox. (not work in chrome or other browser).
This is my code:
<video id="video" style="display:none; width:100%; height:100%;" autoplay>
<source src="/files/convert/videos/{{$moviesNow->url}}" type="video/mp4" />
Su navegador no soporta el tag video.
</video>
<script>
var vid = document.getElementById("video");
var time = {{$difTime}};
var isPlaying = {{$playNow}};
var moviesArr = [];
};
var j = jQuery.noConflict();
j(document).ready(function() {
if(time >= 0 && isPlaying == 1){
//vid.currentTime = time;
}
});
function setCurTime() {
vid.currentTime = time;
};
</script>
Also i trying use:
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
}, false);
But the problem is not solved.
The loadedmetadata event is helpful, but it doesn't ensure that the section of video you are trying to access is seekable yet. You could try a simpler solution using Media Fragments:
Just add #t=120 to the end of the video url to have it auto-forward to that spot. Like this:
video {
height: 180px;
width: 320px;
}
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4#t=120" controls autoplay></video>

Appcelerator - Android Picker not retaining selected value

Consider the following code below:
function doClick(e) {
win.open();
}
var picker = null;
var backBtn = null;
var selectedIdx = 0;
$.index.open();
var win = Titanium.UI.createWindow({
exitOnClose : false,
navBarHidden : true
});
win.addEventListener("open", function() {
if(null != picker) {
//picker.setSelectedRow(0, selectedIdx, false);
return;
}
picker = Titanium.UI.createPicker({
width : "75%",
height : "50dip",
selectionIndicator : true
});
picker.addEventListener("change", function(id) {
selectedIdx = id.rowIndex;
});
var arr = [];
for(var i = 0; i < 10; i++) {
arr.push(Titanium.UI.createPickerRow({
title : i,
color : "black"
}));
}
selectedIdx = 0;
picker.add(arr);
backBtn = Titanium.UI.createButton({
bottom : "10dip",
title : "Close"
});
backBtn.addEventListener("click", function() {
win.close();
});
win.add(picker);
win.add(backBtn);
});
If the above code is executed with SDK 5.2.0.GA or 5.2.2.GA, then you will see that the picker value is not being retained. After ever open/close of the window, even if we reuse the old picker object. But, if you uncomment the setSelectedRow (hack code I would say), then it behaves as required.
Anyone faced such issue or is aware of a proper solution or root cause for it.
I think this is expected behavior. The picker is attached to a window and on Android starting with Release 3.2.0, all the windows are heavyweight. A heavyweight window is associated with a new Android Activity. So when the window is closed the activity is closed and so will be the picker. It that case the picker is not supposed retain its selected value. You can try using lightweight window in this case.
Prior to Release Titanium 3.2.0 in Android, Titanium windows can be heavyweight or lightweight:
A heavyweight window is associated with a new Android Activity.
A lightweight window is a fullscreen view, and runs in the current Android Activity.
If you still want the old behavior, you can enable the ti.android.useLegacyWindow property in the tiapp.xml:
<property name="ti.android.useLegacyWindow" type="bool">true</property>
Documentation Link
I use Ti.UI.Picker for date/times. And in that case you need to set the value property to tell the picker what value is selected. I guess you need the same with other types of picker, like:
picker = Titanium.UI.createPicker({
width : "75%",
height : "50dip",
selectionIndicator : true,
value : '0'
});
/John

Hammer js (v 2.0.4) not working well for an img on Desktop IE 11

I am trying to add swipe and press support to an img using Hammer js version 2.0.4 and I have noticed that it does not work well on Desktop IE11. The gestures are triggered maybe once for every 20 attempts.
Here is a jsfiddle with an example.
http://jsfiddle.net/bhptL6mf/32/
$(function() {
var myImg = document.getElementById("myImg");
var blue = document.getElementById("blue");
var hammerManager = new Hammer.Manager(myImg);
var panRecognizer = new Hammer.Pan({
threshold: 0,
pointers: 0
});
hammerManager.add(panRecognizer);
var swipeRecognizer = new Hammer.Swipe({
threshold: 0,
velocity: 0.01
});
hammerManager.add(swipeRecognizer).recognizeWith(hammerManager.get('pan'));
hammerManager.on('swipe', function(event) {
if (event.type == 'swipe') {
($(blue).text() === "Swiped") ? $(blue).text(" "): $(blue).text("Swiped");
}
});
})
Anyone else seeing this issue and know of a workaround? I am also seeing the same issue when gestures are applied to anchors
Setting img attribute draggable to false will fix this on IE.
Also noticed a similar issue on Desktop Fire Fox and had to set -moz-user-select to none and prevent dragstart event in addition to setting draggable to false to fix it.

Initialize youtube api to target ajax loaded iframe

it's my first time to work with Youtube API and after I got most things done, I'm having one last issue with it which i can't seem to solve, so I would appreciate if you could take a few minutes to help.
Here it goes in simple words:
I have a video slider (carousel). Under the main video, are thumbnails of other related videos (this is the site: kushtube.com)
when I click on a related video thumbnail, the main player content is loaded via AJAX
What I wanted to ultimately achieve is that when the current video ends,the next vicdo starts playing automatically.
Now after I did some work, I managed to make it work like that, BUT
it only work on page load...
If i click on one of the related video thumbnails, the content of the player loads via AJAX and I cant seem to be able to re-initialize Youtube API to target the new ajax-loaded player.
This is my current code:
<script>
// global variable for the player
var player;
function ytInit(){
// create the global player from the specific iframe (#video)
player = new YT.Player('test', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange': onPlayerStatusChange
}
});
}
// this function gets called when API is ready to use
function onYouTubeIframeAPIReady() {
ytInit();
}
jQuery(document).ready( function($){
jQuery('ul.carousel-list li').click( function(){
ytInit();
jQuery('ul.carousel-list li.active').removeClass('active');
});
});
function onPlayerStatusChange(event) {
/* video status
----------------
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)
*/
console.log( event );
if( event.data == 0 ){
var thisLI = jQuery('ul.carousel-list li.active'); //get active slider item
var thisLINext = jQuery('ul.carousel-list li.active').next(); //get next slider item
var nextVideoCode = thisLINext.attr('video_code'); //get next video code
var nextVideoTitle = thisLINext.attr('video_title'); //get next video code
var nextVideoUrl = thisLINext.attr('video_url'); //get next video code
thisLINext.addClass('active'); //activate next slider item
thisLI.removeClass('active'); //deactivate current cslider item
//load next video
player.loadVideoById(nextVideoCode);
//update video title in header
jQuery('.entry-header h1.entry-title a').attr('href', decodeURIComponent(nextVideoUrl)).text(decodeURIComponent(nextVideoTitle));
}
}
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
Do you have any helpful suggestions? I would really appreciate.
Calling ytInit() when you click the <li> creates a new player object. I think that's not quite what you want.
Have you tried:
jQuery('ul.carousel-list li').click( function(){
// ytInit();
// just load the video from the "video_code" attr
player.loadVideoById(this.getAttribute('video_code'));
jQuery('ul.carousel-list li.active').removeClass('active');
});
If that doesn't autoplay, then you may have to wait for the YT.PlayerState.CUED (i.e. 5) event in your player status change event listener to start the player.

Bing Maps API v7 Custom HTML pushpins in Firefox not positioned correctly

I've created an app where I use several custom HTML pushpins. Each one of these pushpins has a click event that will call setView on the map to center the map on the selected pin. This works perfectly in all browsers except for Firefox (testing version 22.0).
In Firefox, after the setView animation completes and the map is centered on the pushpin, the pushpin is then offset horizontally, vertically or both by a certain amount of pixels. The amount seems to correspond with amount of pixels the map has moved. If you then drag the map manually with the mouse, upon releasing the mouse button, the pushpin snaps back to its proper place. I've checked the top and left position values of the MapPushpinBase anchor tag in compared it with other browsers and the values differ.
Unfortunately, I cannot post a live example because the product has not yet been publicly released. But see below for the code I'm using.
this.clickHandlers.push(Microsoft.Maps.Events.addHandler(node, 'click', function (e) {
var element = $(e.target._htmlContent);
self.nodeHitboxHandler(element);
}));
Within the nodeHitboxHandler function, the only piece of Bing Map code is this:
this.map.setView({
center: new Microsoft.Maps.Location(panStart.latitude, panStart.longitude),
zoom: this.zoom,
mapTypeId: Microsoft.Maps.MapTypeId[self.mapTypeId]
});
Thanks in advance for any help.
UPDATE:
In order to make things clearer, I've created a simple example that demonstrates the problem. You can see it here: http://ginof.com/tests/bing/
In Firefox, try clicking on the different pushpins and watch the behaviour of the pushpin you've just clicked on after the map finishes panning to its new location. The map works fine in all browsers except Firefox.
Here's the complete JavaScript code for this example:
$(document).ready(function () {
var map = null,
initialCoordinates = {latitude: 40.71435, longitude: -74.00597},
initialPoint = new Microsoft.Maps.Location(initialCoordinates.latitude, initialCoordinates.longitude),
range = {
top: 3,
right: 5,
bottom: 0.01,
left: 5
},
mapOptions = {
credentials:"BING-MAPS-API-KEY",
disableKeyboardInput: true,
disableZooming: true,
enableClickableLogo: false,
enableSearchLogo: false,
showBreadcrumb: false,
showDashboard: false,
showMapTypeSelector: false,
showScalebar: false,
inertiaIntensity: 0.5,
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
center: initialPoint,
zoom: 14
};
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
// Create nodes
map.entities.clear();
var pushpinOptions,
pushpin,
nodeCoordinates;
for (var i = 0; i < 5; i++) {
pushpinOptions = {width: null, height: null, htmlContent: '<div id="node' + i + '" class="node">' + i + '. Custom HTML</div>'};
nodeCoordinates = {latitude: initialCoordinates.latitude + i * 0.005, longitude: initialCoordinates.longitude + i * 0.005};
pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(nodeCoordinates.latitude, nodeCoordinates.longitude), pushpinOptions);
pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click',
(function () {
var nodeId = i,
homeCoordinates = nodeCoordinates;
return function () {
console.log("node " + nodeId + " clicked.");
map.setView({center: new Microsoft.Maps.Location(homeCoordinates.latitude, homeCoordinates.longitude)});
}
})()
);
map.entities.push(pushpin);
}
}
GetMap();
});
Thanks again for any help.
This is a known issue which I was able to reproduce an has been escalated to the development team. Note that the Bing Maps forums are the best place to report these types of issues. You can find a similar thread on this topic here: http://social.msdn.microsoft.com/Forums/en-US/f77e6a80-2e0f-44c3-81cc-edb4c2327016/custom-html-pushpins-in-firefox-not-positioned-correctly

Resources