これは私のカスタム 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
---
問題を解決するために私を助けてください。