Fancybox Popup + JSVideo HTML5 Video - لماذا أفقد عناصر التحكم الخاصة بي؟
https://stackoverflow.com/questions/4271765
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أستخدم jQuery Plugins Fancybox و JSVideo ، في النهاية أريد مقطعًا من المنبثقة عبر FancyBox ولديه تشغيل فيديو HTML5 في ذلك المنبثقة
لديّ هذا العمل - المشكلة الوحيدة هي أن أدوات التحكم في الفيديو ليست ما أتوقعه ... لا يحتوي على عناصر تحكم JSVideo .. لا أعرف ما إذا كان ذلك بمثابة صناديق خيالية أو شيء CSS ، أو كليهما
HTML بسيط - إنه صورة مصغرة تشير إلى JavaScript
<a title="test" name="test" href=""javascript:;" class="fancyvideo5"><img alt="kirk monteux micro-agentur.de grafik design" src="http://www.micro-agentur.com/media/bilder/grafik220.jpg" /></a>
ويبدو أن JavaScript مثل هذا:
<script type="text/javascript">
$(document).ready(function () {
$("a.fancyvideo5").click(function () {
var url = $(this).attr('name');
$.fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'width': 640,
'height': 480,
'content': '<div><div class="video-js-box vim-css">' +
'<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' +
'<source src="' + url + '.mp4" />' +
'<source src="' + url + '.webm" />' +
'<source src="' + url + '.ogv" />' +
'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
'<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' +
'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' +
'<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' +
'<param name="allowfullscreen" value="true" />' +
'<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' +
'<!-- Image Fallback. Typically the same as the poster image. -->' +
'<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' +
' title="No video playback capabilities." />' +
'</object>' +
'</video>' +
'</div></div>',
'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
'onClosed': function () { $("#fancybox-inner").empty(); }
});
return false;
}); // fancyvideo
VideoJS.setupAllWhenReady();
});
</script>
الاسم الموجود في رابط HTML هو مجرد المسار الكامل للملف ، لذلك لدي MP4 في مكان ما على الخادم.
هناك عناصر تحكم .. لكنني أعتقد أنها أدوات التحكم في الفيديو HTML5 الافتراضية ، وليس عناصر التحكم في JSVideo ...
إذا أخرجت Fancybox منه - ووضع JSVideo مضمّنًا مثل هذا
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="320" height="240" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<!-- Support VideoJS by keeping this link. -->
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>
</div>
<!-- End VideoJS -->
مقطع فيديو مع عناصر التحكم المناسبة يأتي - هل هو أن أنا أحاول أن أتعامل مع محتوى Fancybox؟
شكرًا
المحلول
كان بيتر محقًا حول Oncomplete. إذا كان الأمر يجبر مشغل الفلاش ، فإن VideoJS يعمل على الأقل ، في حين أنه لم يكن من قبل إذا كنت ترى عناصر التحكم الافتراضية للمتصفح. إنه يفرض فقط استرداد الفلاش إذا كان لا يعتقد أنه يمكن تشغيل الملف.
يستخدم VideoJS سمة "type" للتحقق ، والتي يبدو أنك قمت بإزالتها. أضف مرة أخرى في:
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
إلى MP4 ، وقد تراه يعمل. ستحتاج إلى إضافة النوع مرة أخرى إلى المصادر الأخرى أيضًا. امل ان يساعد.
نصائح أخرى
حاول وضع VideoJS.setupAllWhenReady(); في $.fancybox.onComplete.
ربما لا يكون محتوى Fancybox الخاص بك في DOM عندما يحاول JSVideo تطبيق عناصر التحكم في الفيديو.
مثله:
<script type="text/javascript">
$(function () {
$("a.fancyvideo5").click(function () {
var url = $(this).attr('name');
$.fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'width': 640,
'height': 480,
'content': '<div><div class="video-js-box vim-css">' +
'<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' +
'<source src="' + url + '.mp4" />' +
'<source src="' + url + '.webm" />' +
'<source src="' + url + '.ogv" />' +
'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
'<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' +
'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' +
'<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' +
'<param name="allowfullscreen" value="true" />' +
'<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' +
'<!-- Image Fallback. Typically the same as the poster image. -->' +
'<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' +
' title="No video playback capabilities." />' +
'</object>' +
'</video>' +
'</div></div>',
'onComplete': function () {
$("#fancybox-inner").css({ 'overflow': 'hidden' });
VideoJS.setupAllWhenReady();
},
'onClosed': function () { $("#fancybox-inner").empty(); }
});
return false;
}); // fancyvideo
});
</script>
يحرر: قد يكون هذا البرنامج المساعد ذا صلة بالاستخدام: http://videojs.com/jquery/
أتمنى أن تكون قد حصلت بالفعل على الإصلاح. كنت تفتقد تنسيقات أخرى و type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' بطاقة شعار. عملت معي. قون
هذا ما نجح بالنسبة لي. سيكون عليك تخصيص لتناسب احتياجاتك ، بالطبع.
رمز في الرأس:
<script type="text/javascript">
$(document).ready(function () {
$("a.fancyvideo5").click(function () {
var url = $(this).attr('name');
$.fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'content': '<div class="video-js-box">' +
'<video class="video-js" width="635" height="475" controls preload>' +
'<source src="' + url + '"' + 'type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"' + '/> ' +
'</video>' +
'</div>',
'beforeShow': function () {
VideoJS.setupAllWhenReady();
},
});
});
});
</script>
رابط الصورة:
<a class="fancyvideo5" name="video/animation/animation_zemibank.mp4"><img src="images/misc/spotlight_images/spotlight_animation.png" width="248" height="145" alt="Film" /></a>
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video">
<a href="video/video-2011-11-27-20-26-40.mp4">video</a>
</p>
</div>
كنت أحاول هذا أيضًا وأخيراً كان هذا العمل بالنسبة لي باستخدام النهج أدناه.
jQuery(document).ready(function(){
jQuery("a#videolink").fancybox({
frameWidth: 800,
frameHeight: 450,
overlayShow: true,
overlayOpacity: 0.7
});
});
<a id="videolink" href="#MYID" title="Test Video">
<img src="mp4test.jpg" width="248" height="145" />
</a>
<div style="display:none">
<video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="300" data-setup="{}" >
<source src="mp4test.mp4" type='video/mp4'>
</video>
</div>
لكتابة هذا البرنامج النصي بأسلوب أكثر بساطة ، يجب عليك استخدام خاصية BeForeLoad لـ FancyBox. في هذا إعادة الدفاع ، تحدد المحتوى الخاص بك. في حالتي ، يحتوي عنصر ATTR على اسم الملف ، وبالتالي يمكنني تعيين مصدر تنسيق فيديو متعدد.
$("a.fancybox_video").fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'width': 640,
'height': 480,
'beforeLoad': function() {
this.content = '<video width="640" height="480" controls="controls">'+
'<source src="' + $(this.element).attr('name') + '.mp4" type="video/mp4"></source> ' +
'<source src="' + $(this.element).attr('name') + '.webm" type="video/webm"></source>' +
'Your browser does not support the HTML 5 video tag'+
'</video>';
},
'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
'onClosed': function () { $("#fancybox-inner").empty(); }
});
