这是我的自定义 HTML5 视频播放器：我的测试链接
<video id="vp2_html5_rightSidePlaylist_UB" width="688" height="387" preload="auto">
<div id="playlist" class="hideElement">
<ul>
<li class="xtitle">Lorem Ipsum Dolor</li>
<li class="xdesc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam a sem tortor, eu gravida massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent feugiat tellus sit amet nisl varius quis blandit mi pretium. Cras non neque diam. Vestibulum elit nunc, tristique quis vulputate eu, lobortis eu neque. Donec mollis consequat arcu.</li>
<li class="xthumb">videos/thumbs/t_a1.jpg</li>
<li class="xpreview">videos/previews/prev_a1.jpg</li>
<li class="xsources_mp4">http://video-js.zencoder.com/oceans-clip.mp4</li>
<li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
<li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
</ul>
<ul>
<li class="xtitle">Fusce Suscipit Risus</li>
<li class="xdesc">Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus. Vestibulum lobortis quam eu dui luctus molestie. Sed dictum urna at erat congue ultricies ac ut dui. Etiam orci purus, cursus et aliquet et, iaculis sed enim. Sed felis felis, tristique eu suscipit venenatis, accumsan a augue. Donec non enim neque, nec pretium leo. Cras dapibus, lectus in facilisis cursus, dolor justo dictum ligula, quis cursus elit est in felis. Donec tristique magna at tellus gravida luctus.</li>
<li class="xthumb">videos/thumbs/t_b1.jpg</li>
<li class="xpreview">videos/previews/prev_b1.jpg</li>
<li class="xsources_mp4">videos/sintel_trailer.mp4</li>
<li class="xsources_ogv">videos/sintel_trailer.ogv</li>
<li class="xsources_webm">videos/sintel_trailer.webm</li>
</ul>
<ul>
<li class="xtitle">Class Aptent Taciti</li>
<li class="xdesc">Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend.</li>
<li class="xthumb">videos/thumbs/t_a2.jpg</li>
<li class="xpreview">videos/previews/prev_a2.jpg</li>
<li class="xsources_mp4">videos/big_buck_bunny_trailer.mp4</li>
<li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
<li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
<li class="xsources_mp4v">videos/big_buck_bunny_trailer.mp4v</li>
</ul>
<ul>
<li class="xtitle">Maecenas Lacus Ante</li>
<li class="xdesc">Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum.</li>
<li class="xthumb">videos/thumbs/t_b2.jpg</li>
<li class="xpreview">videos/previews/prev_b2.jpg</li>
<li class="xsources_mp4">videos/sintel_trailer.mp4</li>
<li class="xsources_ogv">videos/sintel_trailer.ogv</li>
<li class="xsources_webm">videos/sintel_trailer.webm</li>
<li class="xsources_mp4v">videos/sintel_trailer.mp4v</li>
</ul>
<ul>
<li class="xtitle">Lorem Ipsum Dolor</li>
<li class="xdesc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit</li>
<li class="xthumb">videos/thumbs/t_a3.jpg</li>
<li class="xpreview">videos/previews/prev_a3.jpg</li>
<li class="xsources_mp4">videos/big_buck_bunny_trailer.mp4</li>
<li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
<li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
<li class="xsources_mp4v">videos/big_buck_bunny_trailer.mp4v</li>
</ul>
<ul>
<li class="xtitle">Fusce Suscipit Risus</li>
<li class="xdesc">Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus. Vestibulum lobortis quam eu dui luctus molestie. Sed dictum urna at erat congue ultricies ac ut dui. Etiam orci purus, cursus et aliquet et, iaculis sed enim. Sed felis felis, tristique eu suscipit venenatis, accumsan a augue. Donec non enim neque, nec pretium leo. Cras dapibus, lectus in facilisis cursus, dolor justo dictum ligula, quis cursus elit est in felis. Donec tristique magna at tellus gravida luctus.</li>
<li class="xthumb">videos/thumbs/t_b3.jpg</li>
<li class="xpreview">videos/previews/prev_b3.jpg</li>
<li class="xsources_mp4">videos/sintel_trailer.mp4</li>
<li class="xsources_ogv">videos/sintel_trailer.ogv</li>
<li class="xsources_webm">videos/sintel_trailer.webm</li>
</ul>
<ul>
<li class="xtitle">Class Aptent Taciti</li>
<li class="xdesc">Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend.</li>
<li class="xthumb">videos/thumbs/t_a4.jpg</li>
<li class="xpreview">videos/previews/prev_a4.jpg</li>
<li class="xsources_mp4">videos/big_buck_bunny_trailer.mp4</li>
<li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
<li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
<li class="xsources_mp4v">videos/big_buck_bunny_trailer.mp4v</li>
</ul>
<ul>
<li class="xtitle">Maecenas Lacus Ante</li>
<li class="xdesc">Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum.</li>
<li class="xthumb">videos/thumbs/t_b4.jpg</li>
<li class="xpreview">videos/previews/prev_b4.jpg</li>
<li class="xsources_mp4">videos/sintel_trailer.mp4</li>
<li class="xsources_ogv">videos/sintel_trailer.ogv</li>
<li class="xsources_webm">videos/sintel_trailer.webm</li>
<li class="xsources_mp4v">videos/sintel_trailer.mp4v</li>
</ul>
</div>
</video>
它在主要的桌面浏览器和 android 中也可以正常工作。但不能在 ipad 上工作。我尝试了一些工作正常的警报检查。从那我无法预测可能是什么问题。
jQuery插件链接在这里
(function($) {
$.fn.vp2_html5_rightSidePlaylist_Video = function(options) {
//fullscreen vars
var bodyOrigMargin;
var bodyOrigOverflow;
//video
var videoIsFullScreen=false;
var videoOrigWidth;
var videoOrigHeight;
var videoOrigPosition;
var videoOrigLeft;
var videoOrigTop;
//border
var videoBorderOrigPosition;
//video container
---
请帮我解决问题。