我只是将我的应用程序升级到新的videojs版本4.0,但它现在不适用于iPad(据我所知,适用于所有其他浏览器).
4.0皮肤没有出现,API看起来根本不起作用.该视频用作背景,由应用程序中的按钮控制.但是,升级后,视频会导致所有按钮无法点击(如果可以,则无法触摸).
这是我正在使用的JS.
var $curTime = 0;
var $setPause = "Go";
var $timeOutTime = 1000;
$( '#main' ).on( 'pageshow',function(event){
videojs("HumanBody", {"preload":"metadata","poster":"http://pidcgr.com/lobby/humanbody/vid/poster.png","controls":true}, function(){
console.log("Initialized");
});
var myPlayer = videojs("HumanBody");
myPlayer.ready(function(){
myPlayer.src([
{ type: "video/mp4", src: "http://pidcgr.com/lobby/humanbody/vid/bodyapp.mp4" },
{ type: "video/ogg", src: "http://pidcgr.com/lobby/humanbody/vid/bodyapp.ogv" }
]);
setTimeout(function() {
if($setPause=="Paused") {
myPlayer.pause();
}
else {
myPlayer.play();
}
myPlayer.on('loadedmetadata', function() {
myPlayer.currentTime($curTime.toFixed(1));
});
}, $timeOutTime);
$(".video-nav").click(function() {
myPlayer.pause();
$curTime = myPlayer.currentTime();
$setPause = "Paused";
});
$("a.start-over").click(function() {
myPlayer.pause();
$curTime = 0;
$setPause = "Go";
});
myPlayer.on('pause', function() {
myPlayer.posterImage.show();
});
myPlayer.on('ended', function() {
myPlayer.currentTime(myPlayer.duration()-1+0.99);
myPlayer.pause();
myPlayer.posterImage.hide();
});
myPlayer.on('error', function() {
console.log("Error");
});
$timeOutTime = 500;
});
});
Run Code Online (Sandbox Code Playgroud)
视频标记如下所示:
<video id="HumanBody" class="video-js vjs-default-skin" width="1024" height="748"></video>
Run Code Online (Sandbox Code Playgroud)
在此处预览URL:http://pidcgr.com/lobby/humanbody/
小智 5
您可以设置一个新的(尚未记录?)选项,它将禁用iPad和Android设备上的默认控件并显示videojs皮肤:customControlsOnMobile
所以设置videojs:
$( '#main' ).on( 'pageshow',function(event){
videojs("HumanBody", {"preload":"metadata","poster":"http://pidcgr.com/lobby/humanbody/vid/poster.png","controls":true, "customControlsOnMobile": true}, function(){
});
Run Code Online (Sandbox Code Playgroud)
致谢,菲利普
| 归档时间: |
|
| 查看次数: |
2251 次 |
| 最近记录: |