dialog-video.php 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <?php if( !defined( 'ABSPATH') ) exit(); ?>
  2. <!-- //Youtube dialog: -->
  3. <div id="dialog_video" class="dialog-video" title="<?php _e('Add Video Layer', 'revslider'); ?>" style="display:none">
  4. <form id="video_dialog_form" name="video_dialog_form" onkeypress="return event.keyCode != 13;">
  5. <div id="video_content" style="display:none"></div>
  6. <div id="video-dialog-wrap">
  7. <div id="video_dialog_tabs" class="box-closed tp-accordion disabled" style="background:#fff">
  8. <ul class="rs-layer-settings-tabs">
  9. <li class="selected" data-content="#rs-video-source" id="reset_video_dialog_tab"><i style="height:45px" class="rs-mini-layer-icon eg-icon-export rs-toolbar-icon"></i><?php _e('Source', 'revslider'); ?></li>
  10. <li class="rs-hide-on-audio" data-content="#rs-video-size"><i style="height:45px; font-size:16px" class="rs-mini-layer-icon eg-icon-resize-full-alt rs-toolbar-icon"></i><?php _e('Sizing', 'revslider'); ?></li>
  11. <li class="" data-content="#rs-video-settings"><i style="height:45px; font-size:16px" class="rs-mini-layer-icon eg-icon-cog rs-toolbar-icon"></i><?php _e('Settings', 'revslider'); ?></li>
  12. <li class="rs-hide-on-audio" data-content="#rs-video-thumbnails"><i style="height:45px; font-size:16px" class="rs-mini-layer-icon eg-icon-eye rs-toolbar-icon"></i><?php _e('Poster/Mobile Visibility', 'revslider'); ?></li>
  13. <li class="" data-content="#rs-video-arguments"><i style="height:45px; font-size:16px" class="rs-mini-layer-icon eg-icon-th rs-toolbar-icon"></i><?php _e('Arguments', 'revslider'); ?></li>
  14. </ul>
  15. <div style="clear:both"></div>
  16. </div>
  17. </div>
  18. <div id="rs-video-source">
  19. <!-- Type chooser -->
  20. <div id="video_type_chooser" class="video-type-chooser" style="margin-bottom:25px">
  21. <label><?php _e('Choose video type', 'revslider'); ?></label>
  22. <input type="radio" checked id="video_radio_youtube" name="video_select">
  23. <span for="video_radio_youtube"><?php _e('YouTube', 'revslider'); ?></span>
  24. <input type="radio" id="video_radio_vimeo" name="video_select" style="margin-left:20px">
  25. <span for="video_radio_vimeo"><?php _e('Vimeo', 'revslider'); ?></span>
  26. <input type="radio" id="video_radio_html5" name="video_select" style="margin-left:20px">
  27. <span for="video_radio_html5"><?php _e('HTML5', 'revslider'); ?></span>
  28. <span class="rs-show-when-youtube-stream" style="display: none;">
  29. <input type="radio" id="video_radio_streamyoutube" name="video_select" style="margin-left:20px">
  30. <span for="video_radio_streamyoutube"><?php _e('From Stream', 'revslider'); ?></span>
  31. </span>
  32. <span class="rs-show-when-vimeo-stream" style="display: none;">
  33. <input type="radio" id="video_radio_streamvimeo" name="video_select" style="margin-left:20px">
  34. <span for="video_radio_streamvimeo"><?php _e('From Stream', 'revslider'); ?></span>
  35. </span>
  36. <span class="rs-show-when-instagram-stream" style="display: none;">
  37. <input type="radio" id="video_radio_streaminstagram" name="video_select" style="margin-left:20px">
  38. <span for="video_radio_streaminstagram"><?php _e('From Stream', 'revslider'); ?></span>
  39. </span>
  40. <input type="radio" checked id="video_radio_audio" name="video_select" style="display: none;">
  41. </div>
  42. <!-- Vimeo block -->
  43. <div id="video_block_vimeo" class="video-select-block" style="display:none;" >
  44. <label><?php _e('Vimeo ID or URL', 'revslider'); ?></label>
  45. <input type="text" id="vimeo_id" value="">
  46. <input type="button" style="vertical-align:middle" id="button_vimeo_search" class="button-regular video_search_button" value="search">
  47. <span class="video_example"><?php _e('example: 30300114', 'revslider'); ?></span>
  48. <img id="vimeo_loader" src="<?php echo RS_PLUGIN_URL; ?>/admin/assets/images/loader.gif" style="display:none">
  49. </div>
  50. <!-- Youtube block -->
  51. <div id="video_block_youtube" class="video-select-block">
  52. <label><?php _e('YouTube ID or URL', 'revslider'); ?></label>
  53. <input type="text" id="youtube_id" value="">
  54. <input type="button" style="vertical-align:middle" id="button_youtube_search" class="button-regular video_search_button" value="search">
  55. <span class="video_example"><?php _e('example', 'revslider'); ?>: <?php echo RevSliderGlobals::YOUTUBE_EXAMPLE_ID; ?></span>
  56. <img id="youtube_loader" src="<?php echo RS_PLUGIN_URL; ?>/admin/assets/images/loader.gif" style="display:none">
  57. </div>
  58. <!-- Html 5 block -->
  59. <div id="video_block_html5" class="video-select-block" style="display:none;">
  60. <label><?php _e('Poster Image Url', 'revslider'); ?></label>
  61. <input style="width:330px" type="text" id="html5_url_poster" name="html5_url_poster" value="">
  62. <span class="imgsrcchanger-div" style="margin-left:20px;">
  63. <a href="javascript:void(0)" class="button-image-select-html5-video button-primary revblue" ><?php _e('Choose from Library', 'revslider'); ?></a>
  64. </span>
  65. <span class="video_example">&nbsp;</span>
  66. <label><?php _e('Video MP4 Url', 'revslider'); ?></label>
  67. <input style="width:330px" type="text" id="html5_url_mp4" name="html5_url_mp4" value="">
  68. <span class="vidsrcchanger-div" style="margin-left:20px;">
  69. <a href="javascript:void(0)" data-inptarget="html5_url_mp4" class="button_change_video button-primary revblue" ><?php _e('Choose from Library', 'revslider'); ?></a>
  70. </span>
  71. <span class="video_example"><?php _e("example",'revslider'); ?>: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4</span>
  72. <label><?php _e('Video WEBM Url', 'revslider'); ?></label>
  73. <input style="width:330px" type="text" id="html5_url_webm" name="html5_url_webm" value="">
  74. <span class="vidsrcchanger-div" style="margin-left:20px;">
  75. <a href="javascript:void(0)" data-inptarget="html5_url_webm" class="button_change_video button-primary revblue" ><?php _e('Choose from Library', 'revslider'); ?></a>
  76. </span>
  77. <span class="video_example"><?php _e('example','revslider'); ?>: http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm</span>
  78. <label><?php _e('Video OGV Url', 'revslider'); ?></label>
  79. <input style="width:330px" type="text" id="html5_url_ogv" name="html5_url_ogv" value="">
  80. <span class="vidsrcchanger-div" style="margin-left:20px;">
  81. <a href="javascript:void(0)" data-inptarget="html5_url_ogv" class="button_change_video button-primary revblue" ><?php _e('Choose from Library', 'revslider'); ?></a>
  82. </span>
  83. <span class="video_example"><?php _e('example', 'revslider'); ?>: http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv</span>
  84. </div>
  85. <div id="video_block_audio" class="video-select-block" style="display:none;" >
  86. <label><?php _e('Audio Url', 'revslider'); ?></label>
  87. <input style="width:330px" type="text" id="html5_url_audio" name="html5_url_audio" value="">
  88. <span class="vidsrcchanger-div" style="margin-left:20px;">
  89. <a href="javascript:void(0)" data-inptarget="html5_url_audio" class="button_change_video button-primary revblue" ><?php _e('Choose from Library', 'revslider'); ?></a>
  90. </span>
  91. </div>
  92. </div>
  93. <div id="rs-video-size" style="display:none">
  94. <!-- Video Sizing -->
  95. <div id="video_size_wrapper" class="youtube-inputs-wrapper">
  96. <label for="input_video_fullwidth"><?php _e('Full Screen:', 'revslider'); ?></label>
  97. <input type="checkbox" class="tp-moderncheckbox rs-staticcustomstylechange tipsy_enabled_top" id="input_video_fullwidth">
  98. <div class="clearfix mb10"></div>
  99. </div>
  100. <label for="input_video_cover" class="video-label"><?php _e('Force Cover:', 'revslider'); ?></label>
  101. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox mb10" id="input_video_cover">
  102. <div id="fullscreenvideofun1" class="video-settings-line mb10">
  103. <label for="input_video_dotted_overlay" class="video-label" id="input_video_dotted_overlay_lbl">
  104. <?php _e('Dotted Overlay:', 'revslider'); ?>
  105. </label>
  106. <select id="input_video_dotted_overlay" style="width:100px">
  107. <option value="none"><?php _e('none','revslider'); ?></option>
  108. <option value="twoxtwo"><?php _e('2 x 2 Black','revslider'); ?></option>
  109. <option value="twoxtwowhite"><?php _e('2 x 2 White','revslider'); ?></option>
  110. <option value="threexthree"><?php _e('3 x 3 Black','revslider'); ?></option>
  111. <option value="threexthreewhite"><?php _e('3 x 3 White','revslider'); ?></option>
  112. </select>
  113. <div class="clearfix mb10"></div>
  114. <label for="input_video_ratio" class="video-label" id="input_video_ratio_lbl">
  115. <?php _e('Aspect Ratio:', 'revslider'); ?>
  116. </label>
  117. <select id="input_video_ratio" style="width:100px">
  118. <option value="16:9"><?php _e('16:9','revslider'); ?></option>
  119. <option value="4:3"><?php _e('4:3','revslider'); ?></option>
  120. </select>
  121. </div>
  122. <div id="video_full_screen_settings" class="video-settings-line">
  123. <div class="mb10">
  124. <label for="input_video_leave_fs_on_pause"><?php _e('Leave Full Screen on Pause/End:', 'revslider'); ?></label>
  125. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_leave_fs_on_pause">
  126. </div>
  127. </div>
  128. </div>
  129. <div id="rs-video-settings" style="display:none">
  130. <div class="mb10">
  131. <label for="input_video_loop"><?php _e("Loop:",'revslider'); ?></label>
  132. <?php /* <input type="checkbox" class="checkbox_video_dialog mtop_13" id="input_video_loop" > */ ?>
  133. <select id="input_video_loop" style="width: 200px;">
  134. <option value="none"><?php _e('Disable', 'revslider'); ?></option>
  135. <option class="rs-hide-on-audio" value="loop"><?php _e('Loop, Slide is paused', 'revslider'); ?></option>
  136. <option class="rs-hide-on-audio" value="loopandnoslidestop"><?php _e('Loop, Slide does not stop', 'revslider'); ?></option>
  137. <option class="rs-show-on-audio" value="loopandnoslidestop"><?php _e('Loop Segment', 'revslider'); ?></option>
  138. </select>
  139. </div>
  140. <div class="mb10">
  141. <label for="input_video_autoplay"><?php _e('Autoplay:', 'revslider'); ?></label>
  142. <select id="select_video_autoplay">
  143. <option value="false"><?php _e('Off', 'revslider'); ?></option>
  144. <option value="true"><?php _e('On', 'revslider'); ?></option>
  145. <option value="1sttime"><?php _e('On 1st Time', 'revslider'); ?></option>
  146. <option value="no1sttime"><?php _e('Not on 1st Time', 'revslider'); ?></option>
  147. </select>
  148. </div>
  149. <div class="mb10">
  150. <label for="input_video_stopallvideo"><?php _e('Stop Other Media:', 'revslider'); ?></label>
  151. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_stopallvideo" >
  152. </div>
  153. <div class="mb10 hide-for-vimeo rs-hide-on-audio">
  154. <label for="input_video_allowfullscreen"><?php _e('Allow FullScreen:', 'revslider'); ?></label>
  155. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_allowfullscreen" >
  156. </div>
  157. <div class="mb10">
  158. <label for="input_video_nextslide"><?php _e('Next Slide On End:', 'revslider'); ?></label>
  159. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_nextslide" >
  160. </div>
  161. <div class="mb10">
  162. <label for="input_video_force_rewind"><?php _e('Rewind at Slide Start:', 'revslider'); ?></label>
  163. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_force_rewind" >
  164. </div>
  165. <div class="mb10">
  166. <label for="input_video_control"><?php _e('Hide Controls:', 'revslider'); ?></label>
  167. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_control" >
  168. <span style="vertical-align:middle; margin-left:15px; display:none" class="description hidecontroldepend"><?php _e('Layer Action may needed to start/stop Video', 'revslider'); ?></span>
  169. </div>
  170. <script>
  171. jQuery('#input_video_control').on('change',function() {
  172. if (jQuery(this).attr('checked')==="checked")
  173. jQuery('.hidecontroldepend').show();
  174. else
  175. jQuery('.hidecontroldepend').hide();
  176. })
  177. </script>
  178. <div class="mb10 rs-hide-on-audio">
  179. <label for="input_video_mute"><?php _e('Mute:', 'revslider'); ?></label>
  180. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_mute" >
  181. </div>
  182. <div class="mb10 video-volume">
  183. <label for="input_video_volume"><?php _e('Volume (0 - 100):', 'revslider'); ?></label>
  184. <input type="text" class="input_video_dialog" style="width: 50px;" id="input_video_volume" >
  185. </div>
  186. <div class="mb10">
  187. <span class="rs-hide-on-audio"><label for="input_video_start_at"><?php _e('Start at:', 'revslider'); ?></label></span>
  188. <span class="rs-show-on-audio"><label for="input_video_start_at"><?php _e('Segment Start:', 'revslider'); ?></label></span>
  189. <input type="text" id="input_video_start_at" style="width: 50px;"> <?php _e('i.e.: 0:17', 'revslider'); ?>
  190. </div>
  191. <div class="mb10">
  192. <span class="rs-hide-on-audio"><label for="input_video_end_at"><?php _e('End at:', 'revslider'); ?></label></span>
  193. <span class="rs-show-on-audio"><label for="input_video_end_at"><?php _e('Segment End:', 'revslider'); ?></label></span>
  194. <input type="text" id="input_video_end_at" style="width: 50px;"> <?php _e('i.e.: 2:41', 'revslider'); ?>
  195. </div>
  196. <div class="mb10 rs-hide-on-audio">
  197. <label for="input_video_show_cover_pause"><?php _e('Show Cover at Pause:', 'revslider'); ?></label>
  198. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_show_cover_pause" >
  199. </div>
  200. <div class="mb10 rs-show-on-audio">
  201. <label for="input_video_show_visibility"><?php _e('Invisible on Frontend:', 'revslider'); ?></label>
  202. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_show_visibility" >
  203. </div>
  204. <div id="rev-youtube-options" class="video-settings-line mb10 rs-hide-on-audio">
  205. <div class="mb10">
  206. <label for="input_video_speed"><?php _e('Video Speed:', 'revslider'); ?></label>
  207. <select id="input_video_speed" style="width:75px">
  208. <option value="0.25"><?php _e('0.25', 'revslider'); ?></option>
  209. <option value="0.50"><?php _e('0.50', 'revslider'); ?></option>
  210. <option value="1"><?php _e('1', 'revslider'); ?></option>
  211. <option value="1.5"><?php _e('1.5', 'revslider'); ?></option>
  212. <option value="2"><?php _e('2', 'revslider'); ?></option>
  213. </select>
  214. </div>
  215. </div>
  216. <!-- JASON -->
  217. <div id="rev-playsinline-options" class="video-settings-line mb10 rs-hide-on-audio">
  218. <div class="mb10">
  219. <label for="input_video_play_inline"><?php _e('Play Video Inline:', 'revslider'); ?></label>
  220. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_play_inline" >
  221. </div>
  222. </div>
  223. <div class="mb10 rs-show-on-audio" style="display: none">
  224. <div class="mb10">
  225. <label for="input_audio_preload" class="video-label">
  226. <?php _e("Audio Preload:",'revslider')?>
  227. </label>
  228. <select id="input_audio_preload" style="width:200px">
  229. <option value="none"><?php _e('Disable', 'revslider'); ?></option>
  230. <option value="metadata"><?php _e('Metadata', 'revslider'); ?></option>
  231. <option value="progress"><?php _e('Progress', 'revslider'); ?></option>
  232. <option value="canplay"><?php _e('Can Play', 'revslider'); ?></option>
  233. <option value="canplaythrough"><?php _e('Can Play Through', 'revslider'); ?></option>
  234. </select>
  235. </div>
  236. <div class="mb10">
  237. <label for="input_audio_preload" class="video-label">
  238. <?php _e("Ignore Preload after ",'revslider'); ?>
  239. </label>
  240. <select id="input_video_preload_wait">
  241. <option value="0"><?php _e('0', 'revslider'); ?></option>
  242. <option value="1"><?php _e('1', 'revslider'); ?></option>
  243. <option value="2"><?php _e('2', 'revslider'); ?></option>
  244. <option value="3"><?php _e('3', 'revslider'); ?></option>
  245. <option value="4"><?php _e('4', 'revslider'); ?></option>
  246. <option value="5"><?php _e('5', 'revslider'); ?></option>
  247. <option value="6"><?php _e('6', 'revslider'); ?></option>
  248. <option value="7"><?php _e('7', 'revslider'); ?></option>
  249. <option value="8"><?php _e('8', 'revslider'); ?></option>
  250. <option value="9"><?php _e('9', 'revslider'); ?></option>
  251. <option value="10"><?php _e('10', 'revslider'); ?></option>
  252. </select><?php _e(" seconds",'revslider'); ?>
  253. </div>
  254. </div>
  255. <div id="rev-html5-options" style="display: none; mb10">
  256. <div class="mb10">
  257. <label for="input_video_preload" class="video-label">
  258. <?php _e("Video Preload:",'revslider')?>
  259. </label>
  260. <select id="input_video_preload" style="width:200px">
  261. <option value="auto"><?php _e('Auto', 'revslider'); ?></option>
  262. <option value="none"><?php _e('Disable', 'revslider'); ?></option>
  263. <option value="metadata"><?php _e('Metadata', 'revslider'); ?></option>
  264. </select>
  265. </div>
  266. <div class="mb10">
  267. <label for="input_video_large_controls"><?php _e('Large Controls:', 'revslider'); ?></label>
  268. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_video_large_controls" >
  269. </div>
  270. </div>
  271. </div>
  272. <div id="rs-video-thumbnails" style="display:none">
  273. <div id="preview-image-video-wrap" class="mb10">
  274. <label><?php _e('Poster Image', 'revslider'); ?></label>
  275. <input type="text" class="checkbox_video_dialog " id="input_video_preview">
  276. <input type="button" id="" class="button-image-select-video button-primary revblue" value="<?php _e('Image Library', 'revslider'); ?>">
  277. <input type="button" id="" class="button-image-select-video-default button-primary revblue" value="<?php _e('Video Thumbnail', 'revslider'); ?>">
  278. <input type="button" id="" class="button-image-remove-video button-primary revblue" value="<?php _e('Remove', 'revslider'); ?>">
  279. <div class="clear"></div>
  280. </div>
  281. <div class="mb10">
  282. <label for="input_disable_on_mobile"><?php _e('Disable Video and Show<br>only Poster on Mobile:', 'revslider'); ?></label>
  283. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_disable_on_mobile" >
  284. </div>
  285. <div class="mb10">
  286. <label for="input_use_poster_on_mobile"><?php _e('No Poster on Mobile:', 'revslider'); ?></label>
  287. <input type="checkbox" class="checkbox_video_dialog tp-moderncheckbox" id="input_use_poster_on_mobile" >
  288. <div style="width:100%;height:10px"></div>
  289. </div>
  290. <!--div class="mb10">
  291. <select id="select_mobile_setting">
  292. <option value=""><?php _e('Show Video and Show Poster', 'revslider'); ?></option>posteronlyonmobile="off" && disablevideoonmobile="off"
  293. <option value=""><?php _e('Show Video and Hide Poster', 'revslider'); ?></option>
  294. <option value="use_poster_on_mobile"><?php _e('Hide Video and Show Poster', 'revslider'); ?></option>
  295. <option value="disable_on_mobile"><?php _e('Hide Video and Hide Poster', 'revslider'); ?></option>
  296. </select>
  297. </div-->
  298. </div>
  299. <div id="rs-video-arguments" style="display:none">
  300. <div>
  301. <label><?php _e('Arguments:', 'revslider'); ?></label>
  302. <input type="text" id="input_video_arguments" style="width:350px;" value="" data-youtube="<?php echo RevSliderGlobals::DEFAULT_YOUTUBE_ARGUMENTS; ?>" data-vimeo="<?php echo RevSliderGlobals::DEFAULT_VIMEO_ARGUMENTS; ?>" >
  303. </div>
  304. </div>
  305. <div class="add-button-wrapper" style="margin-left:25px;">
  306. <a href="javascript:void(0)" class="button-primary revblue" id="button-video-add" data-textadd="<?php _e('Add This Video', 'revslider'); ?>" data-textupdate="<?php _e('Update Video', 'revslider'); ?>" ><?php _e('Add This Video', 'revslider'); ?></a>
  307. <a href="javascript:void(0)" class="button-primary revblue" style="display: none;" id="button-audio-add" data-textadd="<?php _e('Add This Audio', 'revslider'); ?>" data-textupdate="<?php _e('Update Audio', 'revslider'); ?>" ><?php _e('Add This Audio', 'revslider'); ?></a>
  308. </div>
  309. </form>
  310. </div>