触摸设备中的视频JS播放器覆盖按钮
VideoJS player overlay buttons in touch devices
我正在使用VideoJs player 4.2
当我在ios设备的safari浏览器中打开videojs播放器时,默认情况下它可以在本机控件上运行。当我暂停播放器时,我在视频上显示叠加按钮(转到其他页面的链接)。如果我单击按钮,它不会在ios中触发。它在桌面浏览器中运行良好。如果我将本机控件触摸设置为 false,它会显示自定义控件。在这里覆盖按钮和自定义控件有效,但它会很慢,我无法滚动视频,与本机控件相比,它会不流畅。请告诉我任何想法
- 如果我使用本机控件,则覆盖按钮必须工作
- 如果我使用自定义控件,那么视频播放器将与本机控件一样流畅
这是我的代码
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();
});
});
覆盖按钮代码
(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));
默认情况下,
浏览器中的HTML5视频将在iPod,iPhone的本机播放器中打开。您必须将HTML内容包装在Webview中,并像本机应用程序一样运行它才能在iPod,Iphone中查看视频。
在 iPhone 与 iPad/浏览器上观看此 HTML5 内联视频
所以这两个更改必须完成 HTML
<video id="xxx" width="xx" height="xx" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
在所有其他设备中,如果没有这些设备,它可以正常工作
最好使用 HammerJS(https://github.com/hammerjs/hammer.js)。对于EmberJS,我们有一个附加 https://github.com/runspired/ember-gestures
相关文章:
- 如何检查用户在html5视频播放器中观看了完整的视频
- 让javascript知道epub3电子书中何时播放媒体覆盖
- 音乐播放器使用相同的id播放所有内容
- 在FF和IE中使用vimeo播放器的问题-加载flash播放器而不是使用HTML5播放器
- 使用HTML5播放器时使用Javascript更改Youtube视频
- 可以't根据设备自动调整youtube播放器的大小
- html5视频播放器和视频js之间的关系
- 有没有办法在dailymotion播放器的新测试版中播放youtube视频
- 我可以共享一个HTML播放器吗
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- 我们如何在dailymotion播放器的新测试版中播放youtube视频
- 角度媒体播放器和动态内容
- Javascript::通过HTML5音频播放器播放列表播放多个音频文件
- HTML5、CSS3和/或JS中旋转CD上的音频播放器
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- 在选择更改时更改从外部javascript生成的flash播放器
- 视频播放器错误promise DOMException中未捕获
- html视频播放器并不总是从src读取
- 触摸设备中的视频JS播放器覆盖按钮
- 覆盖JS视频播放器的onclick()行动