VideoJS player overlay buttons in touch devices

Question

I am using VideoJs player 4.2

When i open a videojs player in safari browser in ios device , it works on native controls by default . When i pause the player, i display overlay buttons (links to go for other page) on video . If i click buttons it does not fire in ios . It works well in desktop browsers . If i set nativeControlsForTouch to false it displays custom controls . Here overlay buttons and custom controls works but it will be sluggish and i am not able scroll over video and it will be not smooth as compared with native controls . Please suggest me any idea

If i use native controls , then overlay buttons has to work
If i use custom controls , then video player will be as smooth as compared with native controls

Here is my code

videojs("ex_video",{"controls":true, "preload":"metadata","width":"auto", "height":"auto",
      "poster":"/images/test.png"},function(){
        var current_player=this; 
        current_player.imageOverlay({
          opacity: 0.5,
          height: '100%',
          width: '50%'
        });
      current_player.on("pause", function(){
        current_player.bigPlayButton.show();

      });
    current_player.on("play", function(){ 
      current_player.bigPlayButton.hide();
    });
});

overlay button code

(function(vjs) {
  var
   extend = function(obj) {
    var arg, i, k;
    for (i = 1; i < arguments.length; i++) {
     arg = arguments[i];
     for (k in arg) {
      if (arg.hasOwnProperty(k)) {
      obj[k] = arg[k];
      }
    }
  }
return obj;
},

defaults = {
  image_url: '',
  click_url: '',
  start_time: null,
  end_time: null,
  opacity: 0.7,
  height: '15%',
  width: '100%'
},

imageOverlay = function(options) {

var player = this,
    settings = extend({}, defaults, options || {}),
    showingImage = false;

if (settings.start_time === null)
  settings.start_time = 0;

if (settings.end_time === null)
  settings.end_time = player.duration() + 1;

overlay = {

  showImage: function() {
    if (showingImage) {

      return;
    }
    showingImage = true;
    var holderDiv = document.createElement('div');
    holderDiv.id = 'vjs-image-overlay-holder';
    holderDiv.style.height = settings.height;
    holderDiv.style.width = settings.width;
    holderDiv.style.opacity=settings.opacity;

    var overlayLbl1= document.createElement('label');
    overlayLbl1.setAttribute('class','heading-overlay-video');
    overlayLbl1.innerHTML= "Like this class? Why not:";
    var topVideoP=overlay.createEl(overlayLbl1);
    topVideoP.className=topVideoP.className+' top-video-control-overlay';
    holderDiv.appendChild(topVideoP);

    //Save to queue
    var overlayBtn1=document.createElement('button');
    overlayBtn1.value = 'Save to queue';
    overlayBtn1.innerHTML='Save to queue';
    overlayBtn1.setAttribute('class','white medium');
    holderDiv.appendChild(overlay.createEl(overlayBtn1));

    //Add to series button
    var overlayBtn2=document.createElement('button');
    overlayBtn2.value = 'Add to series';
    overlayBtn2.innerHTML='Add to series';
    overlayBtn2.setAttribute('class','white medium');
    holderDiv.appendChild(overlay.createEl(overlayBtn2));

    var overlayLbl2= document.createElement('label');
    overlayLbl2.innerHTML= "music credits";
    overlayLbl2.setAttribute('class','msg-blue');
    var btmVideoP=overlay.createEl(overlayLbl2);
    btmVideoP.className=btmVideoP.className+' bottom-video-control';
    holderDiv.appendChild(btmVideoP);



    player.el().appendChild(holderDiv);
  },
  hideImage: function() {
    if (!showingImage) {
      return;
    }
    showingImage = false;
    player.el().removeChild(document.getElementById('vjs-image-overlay-holder'));
  },
  createEl:function(ele_obj){
    var overlayP=document.createElement('p');
    overlayP.setAttribute('class','overlay-video-content-in');
    overlayP.appendChild(ele_obj);
    return overlayP ;
  }
};
var setTimeoutControl;

player.on('pause', function(){
 setTimeoutControl= setTimeout(function(){overlay.showImage()},5000);

});
player.on('play', function(){ 
  clearTimeout(setTimeoutControl);
  overlay.hideImage();
});    
}; 
vjs.plugin('imageOverlay', imageOverlay); 
}(window.videojs));

Show your code . what have you tried ? – Tushar Gupta - curioustushar Oct 29 '13 at 13:38 — Tushar Gupta - curioustushar, Oct 29 '13 at 13:38

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

By default HTML5 video in browser will open in native player in iPod,IPhone. You have to wrap the HTML content in webview and run it like a native application to view video in iPod,Iphone.

See this HTML5 inline video on iPhone vs iPad/Browser

So these two changes has to be done HTML

<video id="xxx" width="xx" height="xx" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

In all other devices it will work fine with out these

edited May 23 '17 at 12:22

Community

1
1

answered Oct 29 '13 at 13:57

Sarath

9,030
11
51
84

thanks for the response , i am not using obj-c . Its just an html5 video player (videojs) . I used webkit-playsinline in video tag but its not working . – maheshiv Oct 29 '13 at 14:25
you cant play an HTML5 video in iPod or IPhone with custom controls until unless u wrap it to a native webview and add these two properties. – Sarath Oct 29 '13 at 14:55
Will you tell me with an example , how can i use webview.allowsInlineMediaPlayback = YES in javascript – maheshiv Oct 29 '13 at 15:47
it is not possible through pure HTML and JS , u need to convert it to a native app through web-view to play the video in iPod/iPhone – Sarath Oct 29 '13 at 19:22

score 1 · Accepted Answer · answered Jun 18 '16 at 06:56

1

It is better to use HammerJS(https://github.com/hammerjs/hammer.js). For EmberJS we have an add-on https://github.com/runspired/ember-gestures

answered Jun 18 '16 at 06:56

maheshiv

1,778
2
17
21

VideoJS player overlay buttons in touch devices

2 Answers2