function wp_ajax_video_player_callback() { function get_youtube_thumb_id_from_url($url) { if (preg_match('%(?:youtube(?:-nocookie)?\\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\\.be/)([^"&?/ ]{11})%i', $url, $match)) { if (!empty($match[1])) { return $match[1]; } else { return false; } } } if (isset($_POST['task'])) { if ($_POST['task'] == "get_video_meta_from_url") { $video_url = $_POST['url']; $youtube_exp = explode("youtu", $video_url); $vimeo_exp = explode("vimeo", $video_url); $video_title = ""; $video_image = ""; if (isset($youtube_exp[1])) { $video_id = get_youtube_thumb_id_from_url($video_url); $video_title = ""; $video_image = 'http://img.youtube.com/vi/' . $video_id . '/mqdefault.jpg'; $type = "youtube"; } else { if (isset($vimeo_exp[1])) { $vidid = explode("/", $video_url); $vidid = end($vidid); $hash = file_get_contents("http://vimeo.com/api/v2/video/" . $vidid . ".php"); $hash = unserialize($hash); $video_image = $hash[0]['thumbnail_large']; $video_title = $hash[0]['title']; $type = "vimeo"; } } if ($video_title == "" && $video_image == "") { echo json_encode(array("fail" => 1)); die; } else { echo json_encode(array("success" => 1, "image_url" => $video_image, "title" => $video_title, "type" => $type)); die; } } if ($_POST['task'] == "get_video_thumb_from_id") { $video_id = $_POST['video_id']; $video_image = ""; if ($_POST['type'] == "youtube") { $video_image = 'http://img.youtube.com/vi/' . $video_id . '/mqdefault.jpg'; } if ($_POST['type'] == "vimeo") { $hash = file_get_contents("http://vimeo.com/api/v2/video/" . $video_id . ".php"); $hash = unserialize($hash); $video_image = $hash[0]['thumbnail_large']; } if (isset($video_image)) { echo json_encode(array("success" => 1, "image_url" => $video_image)); die; } } if ($_POST['task'] == "change_video_link") { if (isset($_POST['type']) && !empty($_POST['type'])) { $type = $_POST['type']; } if (isset($_POST['link']) && !empty($_POST['link'])) { $link = $_POST['link']; } if ($type == "youtube") { $video_id = get_youtube_thumb_id_from_url($link); if ($video_id) { $video_image = 'http://img.youtube.com/vi/' . $video_id . '/mqdefault.jpg'; } } elseif ($type == "vimeo") { $link_explode = explode("/", $link); $video_id = end($link_explode); $hash = file_get_contents("http://vimeo.com/api/v2/video/" . $video_id . ".php"); $hash = unserialize($hash); $video_image = $hash[0]['thumbnail_large']; } if (isset($video_image) && !empty($video_image)) { echo json_encode(array("success" => 1, "video_image" => $video_image, "video_id" => $video_id)); die; } else { echo json_encode(array("error" => "Wrong Video Url")); die; } } } }
function Html_editvideo_player($ord_elem, $row, $cat_row, $rowim, $rowsld, $paramssld, $rowsposts, $rowsposts8, $postsbycat) { global $wpdb; if (isset($_GET["addslide"])) { if ($_GET["addslide"] == 1) { header('Location: admin.php?page=video_players_huge_it_video_player&id=' . $row->id . '&task=apply'); } } ?> <script type="text/javascript"> jQuery("#save-buttom").click(function(){ submitbutton("apply"); }) function submitbutton(pressbutton) { if(!document.getElementById('name').value){ alert("Name is required."); return; } document.getElementById("adminForm").action=document.getElementById("adminForm").action+"&task="+pressbutton; document.getElementById("adminForm").submit(); } function change_select() { submitbutton('apply'); } jQuery(function() { jQuery( "#images-list" ).sortable({ stop: function() { jQuery("#images-list > li").removeClass('has-background'); count=jQuery("#images-list > li").length; for(var i=0;i<=count;i+=2){ jQuery("#images-list > li").eq(i).addClass("has-background"); } jQuery("#images-list > li").each(function(){ jQuery(this).find('.order_by').val(jQuery(this).index()); }); }, revert: true }); // jQuery( "ul, li" ).disableSelection(); }); </script> <!-- GENERAL PAGE, ADD IMAGES PAGE --> <div class="wrap"> <?php $path_site2 = plugins_url("../images", __FILE__); ?> <div class="free_version_banner"> <img class="manual_icon" src="<?php echo $path_site2; ?> /icon-user-manual.png" alt="user manual" /> <p class="usermanual_text">If you have any difficulties in using the options, Follow the link to <a href="http://huge-it.com/wordpress-video-player-user-manual/" target="_blank">User Manual</a></p> <a class="get_full_version" href="http://huge-it.com/video-player/" target="_blank">GET THE FULL VERSION</a> <a href="http://huge-it.com" target="_blank"><img class="huge_it_logo" src="<?php echo $path_site2; ?> /Huge-It-logo.png"/></a> <div style="clear: both;"></div> <div class="description_text"><p>This is the free version of the plugin. In order to use options from this section, get the full version. We appreciate every customer.</p></div> </div> <form action="admin.php?page=video_players_huge_it_video_player&id=<?php echo $row->id; ?> " method="post" name="adminForm" id="adminForm"> <div id="poststuff" > <div id="video_player-header"> <ul id="video_players-list"> <?php foreach ($rowsld as $rowsldires) { if ($rowsldires->id != $row->id) { ?> <li> <a href="#" onclick="window.location.href='admin.php?page=video_players_huge_it_video_player&task=edit_cat&id=<?php echo $rowsldires->id; ?> '" ><?php echo $rowsldires->name; ?> </a> </li> <?php } else { ?> <li class="active" style="background-image:url(<?php echo plugins_url('../images/edit.png', __FILE__); ?> )"> <input class="text_area" onfocus="this.style.width = ((this.value.length + 1) * 8) + 'px'" type="text" name="name" id="name" maxlength="250" value="<?php echo esc_html(stripslashes($row->name)); ?> " /> </li> <?php } } ?> <li class="add-new"> <a onclick="window.location.href='admin.php?page=video_players_huge_it_video_player&task=add_cat'">+</a> </li> </ul> </div> <div id="post-body" class="metabox-holder columns-2"> <!-- Content --> <div id="post-body-content"> <?php add_thickbox(); ?> <div id="post-body"> <div id="post-body-heading"> <h3>Projects/Images</h3> <script> jQuery(document).ready(function($){ jQuery(".wp-media-buttons-icon").click(function() { jQuery(".attachment-filters").css("display","none"); }); var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; jQuery('.huge-it-newuploader .button').click(function(e) { var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(this); var id = button.attr('id').replace('_button', ''); _custom_media = true; jQuery("#"+id).val(''); wp.media.editor.send.attachment = function(props, attachment){ if ( _custom_media ) { jQuery("#"+id).val(attachment.url+';;;'+jQuery("#"+id).val()); jQuery("#save-buttom").click(); } else { return _orig_send_attachment.apply( this, [props, attachment] ); }; } wp.media.editor.open(button); return false; }); jQuery('.add_media').on('click', function(){ _custom_media = false; }); }); </script> <input type="hidden" name="imagess" id="_unique_name" /> <span class="wp-media-buttons-icon"></span> <div class="huge-it-newuploader uploader add-new-image"> <input type="button" class="button button-primary wp-media-buttons-icon" name="_unique_name_button" id="_unique_name_button" value="Upload Video" /> </div> <a href="admin.php?page=video_players_huge_it_video_player&task=video_player_video&id=<?php echo $_GET['id']; ?> &TB_iframe=1" class="button button-primary add-video-slide thickbox" id="slideup3s" value="iframepop"> <span class="wp-media-buttons-icon"></span>Add Video From Url </a> <!--<a href="admin.php?page=video_players_huge_it_video_player&task=video_player_vimeo&id=<?php // echo $_GET['id']; ?> &TB_iframe=1" class="button button-primary add-video-slide thickbox" id="slideup3s" value="iframepop"> <span class="wp-media-buttons-icon"></span>Add Vimeo Video </a>--> </div> <ul id="images-list"> <?php function get_youtube_id_from_url($url) { if (preg_match('%(?:youtube(?:-nocookie)?\\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\\.be/)([^"&?/ ]{11})%i', $url, $match)) { return $match[1]; } } $i = 2; foreach ($rowim as $key => $rowimages) { ?> <?php if ($rowimages->sl_type == '') { $rowimages->sl_type = 'video'; } ?> <?php switch ($rowimages->sl_type) { case 'video': ?> <li <?php if ($i % 2 == 0) { echo "class='has-background'"; } $i++; ?> > <input class="order_by" type="hidden" name="order_by_<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->ordering; ?> " /> <div class="image-container"> <?php $path_site = plugins_url("../images", __FILE__); ?> <?php if ($rowimages->image_url == '') { ?> <img src="<?php echo $path_site; ?> /noimage.jpg" /> <?php } else { ?> <img src="<?php echo $rowimages->image_url; ?> " /> <?php } ?> <div> <script> jQuery(document).ready(function($){ var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; jQuery('.huge-it-editnewuploader .button<?php echo $rowimages->id; ?> ').click(function(e) { var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(this); var id = button.attr('id').replace('_button', ''); _custom_media = true; wp.media.editor.send.attachment = function(props, attachment){ if ( _custom_media ) { jQuery("#"+id).val(attachment.url); jQuery("#save-buttom").click(); } else { return _orig_send_attachment.apply( this, [props, attachment] ); }; } wp.media.editor.open(button); return false; }); jQuery('.add_media').on('click', function(){ _custom_media = false; }); jQuery(".huge-it-editnewuploader").click(function() { }); jQuery(".wp-media-buttons-icon").click(function() { jQuery(".wp-media-buttons-icon").click(function() { jQuery(".media-menu .media-menu-item").css("display","none"); jQuery(".media-menu-item:first").css("display","block"); jQuery(".separator").next().css("display","none"); jQuery('.attachment-filters').val('image').trigger('change'); jQuery(".attachment-filters").css("display","none"); }); }); }); function deleteproject<?php echo $rowimages->id; ?> (){ jQuery('#adminForm').attr('action', 'admin.php?page=video_players_huge_it_video_player&task=edit_cat&id=<?php echo $row->id; ?> &removeslide=<?php echo $rowimages->id; ?> '); } </script> <input type="hidden" name="imagess<?php echo $rowimages->id; ?> " id="_unique_name<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->image_url; ?> " /> <span class="wp-media-buttons-icon"></span> <div class="editimgbutton_block huge-it-editnewuploader uploader button<?php echo $rowimages->id; ?> add-new-image"> <span class="edit_image_info">Set Custom Thumbnail</span> <input type="button" class="editimgbutton button<?php echo $rowimages->id; ?> wp-media-buttons-icon" name="_unique_name_button<?php echo $rowimages->id; ?> " id="_unique_name_button<?php echo $rowimages->id; ?> " value="" /> </div> </div> </div> <div data-video-type="video" class="image-options"> <div class="description-block"> <label for="titleimage<?php echo $rowimages->id; ?> ">Title:</label> <input class="text_area" type="text" id="titleimage<?php echo $rowimages->id; ?> " name="titleimage<?php echo $rowimages->id; ?> " id="titleimage<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->name; ?> "> </div> <div class="description-block"> <label for="for_video_1<?php echo $rowimages->id; ?> ">Url:</label> <input style="padding-right:20px;" type="text" name="for_video_1<?php echo $rowimages->id; ?> " id="for_video_1<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->video_url_1; ?> " /> <div class="huge-it-editnewuploader uploader button<?php echo $rowimages->id; ?> "> <input type="button" class="button<?php echo $rowimages->id; ?> wp-media-buttons-icon editimageicon" name="for_video_1_button<?php echo $rowimages->id; ?> " id="for_video_1_button<?php echo $rowimages->id; ?> " value="" /> </div> </div> <div class="remove-image-container"> <a onclick="deleteproject<?php echo $rowimages->id; ?> (); submitbutton('apply');" id="remove_image<?php echo $rowimages->id; ?> " class="button remove-image">X</a> </div> </div> <div class="clear"></div> </li> <?php break; case 'youtube': ?> <li <?php if ($i % 2 == 0) { echo "class='has-background'"; } $i++; ?> > <input class="order_by" type="hidden" name="order_by_<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->ordering; ?> " /> <div class="image-container"> <?php $path_site = plugins_url("../images", __FILE__); ?> <?php if ($rowimages->image_url == '') { ?> <img src="<?php echo $path_site; ?> /noimage.jpg" /> <?php } else { ?> <img src="<?php echo $rowimages->image_url; ?> " /> <?php } ?> <div> <script> jQuery(document).ready(function($){ var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; jQuery('.huge-it-editnewuploader .button<?php echo $rowimages->id; ?> ').click(function(e) { var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(this); var id = button.attr('id').replace('_button', ''); _custom_media = true; wp.media.editor.send.attachment = function(props, attachment){ if ( _custom_media ) { jQuery("#"+id).val(attachment.url); jQuery("#save-buttom").click(); } else { return _orig_send_attachment.apply( this, [props, attachment] ); }; } wp.media.editor.open(button); return false; }); jQuery('.add_media').on('click', function(){ _custom_media = false; }); jQuery(".huge-it-editnewuploader").click(function() { }); jQuery(".wp-media-buttons-icon").click(function() { jQuery(".wp-media-buttons-icon").click(function() { jQuery(".media-menu .media-menu-item").css("display","none"); jQuery(".media-menu-item:first").css("display","block"); jQuery(".separator").next().css("display","none"); jQuery('.attachment-filters').val('image').trigger('change'); jQuery(".attachment-filters").css("display","none"); }); }); }); function deleteproject<?php echo $rowimages->id; ?> () { jQuery('#adminForm').attr('action', 'admin.php?page=video_players_huge_it_video_player&task=edit_cat&id=<?php echo $row->id; ?> &removeslide=<?php echo $rowimages->id; ?> '); } </script> <input class="hidden_image_url" type="hidden" name="imagess<?php echo $rowimages->id; ?> " id="_unique_name<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->image_url; ?> " /> <span class="wp-media-buttons-icon"></span> <div class="editimgbutton_block huge-it-editnewuploader uploader button<?php echo $rowimages->id; ?> add-new-image"> <span class="edit_image_info">Set Custom Thumbnail</span> <input type="button" class="editimgbutton button<?php echo $rowimages->id; ?> wp-media-buttons-icon" name="_unique_name_button<?php echo $rowimages->id; ?> " id="_unique_name_button<?php echo $rowimages->id; ?> " value="" /> </div> </div> <div class="default_thumbnail"> <div class="button set_default_thumbnail" data-video-type="youtube" data-video-id="<?php echo get_youtube_thumb_id_from_url($rowimages->video_url_1); ?> ">Set Default Thumbnail</div> </div> </div> <div data-video-type="youtube" class="image-options"> <div class="description-block"> <label for="titleimage<?php echo $rowimages->id; ?> ">Title:</label> <input class="text_area" type="text" id="titleimage<?php echo $rowimages->id; ?> " name="titleimage<?php echo $rowimages->id; ?> " id="titleimage<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->name; ?> "> </div> <div class="description-block"> <label for="for_video_1<?php echo $rowimages->id; ?> ">Url:</label> <input class="youtube_link video_link_change" type="text" name="for_video_1<?php echo $rowimages->id; ?> " id="for_video_1<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->video_url_1; ?> " /> <div class="button update_video_link">Update</div> </div> <div class="link-block"> <input type="hidden" name="for_video_2<?php echo $rowimages->id; ?> " id="for_video_2<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->video_url_2; ?> " /> </div> <div class="video_preview_container"> <?php $video_thumb_url = get_youtube_thumb_id_from_url($rowimages->video_url_1); ?> <img src="<?php echo "http://img.youtube.com/vi/" . $video_thumb_url . "/mqdefault.jpg"; ?> " alt="" /> <div class="yt_play_center"></div> </div> <div class="remove-image-container"> <a onclick="deleteproject<?php echo $rowimages->id; ?> (); submitbutton('apply');" id="remove_image<?php echo $rowimages->id; ?> " class="button remove-image">X</a> </div> </div> <div class="clear"></div> </li> <?php break; case "vimeo": ?> <li <?php if ($i % 2 == 0) { echo "class='has-background'"; } $i++; ?> > <input class="order_by" type="hidden" name="order_by_<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->ordering; ?> " /> <div class="image-container"> <?php $path_site = plugins_url("../images", __FILE__); ?> <?php if ($rowimages->image_url == '') { ?> <img src="<?php echo $path_site; ?> /noimage.jpg" /> <?php } else { ?> <img src="<?php echo $rowimages->image_url; ?> " /> <?php } ?> <div> <script> jQuery(document).ready(function($){ var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; jQuery('.huge-it-editnewuploader .button<?php echo $rowimages->id; ?> ').click(function(e) { var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(this); var id = button.attr('id').replace('_button', ''); _custom_media = true; wp.media.editor.send.attachment = function(props, attachment){ if ( _custom_media ) { jQuery("#"+id).val(attachment.url); jQuery("#save-buttom").click(); } else { return _orig_send_attachment.apply( this, [props, attachment] ); }; } wp.media.editor.open(button); return false; }); jQuery('.add_media').on('click', function(){ _custom_media = false; }); jQuery(".huge-it-editnewuploader").click(function() { }); jQuery(".wp-media-buttons-icon").click(function() { jQuery(".wp-media-buttons-icon").click(function() { jQuery(".media-menu .media-menu-item").css("display","none"); jQuery(".media-menu-item:first").css("display","block"); jQuery(".separator").next().css("display","none"); jQuery('.attachment-filters').val('image').trigger('change'); jQuery(".attachment-filters").css("display","none"); }); }); jQuery("#album_name").on("keyup change",function(){ jQuery("#name").val(jQuery(this).val()); }) jQuery("#name").on("keyup change",function(){ jQuery("#album_name").val(jQuery(this).val()); }) }); function deleteproject<?php echo $rowimages->id; ?> () { jQuery('#adminForm').attr('action', 'admin.php?page=video_players_huge_it_video_player&task=edit_cat&id=<?php echo $row->id; ?> &removeslide=<?php echo $rowimages->id; ?> '); } </script> <input class="hidden_image_url" type="hidden" name="imagess<?php echo $rowimages->id; ?> " id="_unique_name<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->image_url; ?> " /> <span class="wp-media-buttons-icon"></span> <div class="editimgbutton_block huge-it-editnewuploader uploader button<?php echo $rowimages->id; ?> add-new-image"> <span class="edit_image_info">Set Custom Thumbnail</span> <input type="button" class="editimgbutton button<?php echo $rowimages->id; ?> wp-media-buttons-icon" name="_unique_name_button<?php echo $rowimages->id; ?> " id="_unique_name_button<?php echo $rowimages->id; ?> " value="" /> </div> </div> <div class="default_thumbnail"> <?php $vidid = explode("/", $rowimages->video_url_1); $vidid = end($vidid); ?> <div class="button set_default_thumbnail" data-video-type="vimeo" data-video-id="<?php echo $vidid; ?> ">Set Default Thumbnail</div> </div> </div> <div data-video-type="vimeo" class="image-options"> <div class="description-block"> <label for="titleimage<?php echo $rowimages->id; ?> ">Title:</label> <input class="text_area" type="text" id="titleimage<?php echo $rowimages->id; ?> " name="titleimage<?php echo $rowimages->id; ?> " id="titleimage<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->name; ?> "> </div> <div class="description-block"> <label for="for_video_1<?php echo $rowimages->id; ?> ">Url:</label> <input class="vimeo_link video_link_change" type="text" name="for_video_1<?php echo $rowimages->id; ?> " id="for_video_1<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->video_url_1; ?> " /> <div class="button update_video_link">Update</div> </div> <div class="link-block"> <input type="hidden" name="for_video_2<?php echo $rowimages->id; ?> " id="for_video_2<?php echo $rowimages->id; ?> " value="<?php echo $rowimages->video_url_2; ?> " /> </div> <div class="video_preview_container"> <?php $vidid = explode("/", $rowimages->video_url_1); $vidid = end($vidid); $hash = file_get_contents("http://vimeo.com/api/v2/video/" . $vidid . ".php"); $vidurl = "https://player.vimeo.com/video/" . $vidid; $hash = unserialize($hash); $video_thumb_url = $hash[0]['thumbnail_large']; ?> <img src="<?php echo $video_thumb_url; ?> " alt="" /> <div class="vimeo_play_center"></div> </div> <div class="remove-image-container"> <a onclick="deleteproject<?php echo $rowimages->id; ?> (); submitbutton('apply');" id="remove_image<?php echo $rowimages->id; ?> " class="button remove-image">X</a> </div> </div> <div class="clear"></div> </li> <?php break; } ?> <?php } ?> </ul> </div> </div> <!-- SIDEBAR --> <div id="postbox-container-1" class="postbox-container"> <div id="side-sortables" class="meta-box-sortables ui-sortable"> <div id="video_player-unique-options" class="postbox"> <h3 class="hndle"><span>Select The Video Player View</span></h3> <ul id="video_player-unique-options-list"> <div id="video_player-current-options-3" class="video_player-current-options"> <ul id="slider-unique-options-list"> <li> <label for="album_name">Player Name</label> <input type="text" id="album_name" name="album_name" value="<?php echo $row->name; ?> " /> </li> <li> <label for="album_single">Player Type</label> <select name="album_single" id="album_single"> <option <?php if ($row->album_single == 'album') { echo 'selected'; } ?> value="album">Album</option> <option <?php if ($row->album_single == 'single') { echo 'selected'; } ?> value="single">Single</option> </select> </li> <li> <label for="album_playlist_layout">Playlist Layout</label> <select name="album_playlist_layout" id="album_playlist_layout"> <option value="left" <?php if ($row->layout == "left") { echo 'selected="selected"'; } ?> >Left</option> <option value="right" <?php if ($row->layout == "right") { echo 'selected="selected"'; } ?> >Right</option> <option value="bottom" <?php if ($row->layout == "bottom") { echo 'selected="selected"'; } ?> >Bottom</option> </select> </li> <li> <label for="album_autoplay">Autoplay</label> <select name="album_autoplay" id="album_autoplay" > <option value="1" <?php if ($row->autoplay == "1") { echo 'selected="selected"'; } ?> >On</option> <option value="0" <?php if ($row->autoplay == "0") { echo 'selected="selected"'; } ?> >Off</option> </select> </li> <li> <label for="album_width">Video Width(px)</label> <input type="number" name="album_width" id="album_width" min="250" value="<?php echo $row->width; ?> " /> </li> </ul> </div> </ul> <div id="major-publishing-actions"> <div id="publishing-action"> <input type="button" onclick="submitbutton('apply')" value="Save Video Player" id="save-buttom" class="button button-primary button-large"> </div> <div class="clear"></div> <!--<input type="button" onclick="window.location.href='admin.php?page=video_players_huge_it_video_player'" value="Cancel" class="button-secondary action">--> </div> </div> <div id="video_player-shortcode-box" class="postbox shortcode ms-toggle"> <h3 class="hndle"><span>Usage</span></h3> <div class="inside"> <ul> <li rel="tab-1" class="selected"> <h4>Shortcode</h4> <p>Copy & paste the shortcode directly into any WordPress post or page.</p> <textarea class="full" readonly="readonly">[huge_it_video_player id="<?php echo $row->id; ?> "]</textarea> </li> <li rel="tab-2"> <h4>Template Include</h4> <p>Copy & paste this code into a template file to include the slideshow within your theme.</p> <textarea class="full" readonly="readonly"><?php echo do_shortcode("[huge_it_video_player id='<?php echo $row->id; ?> ']"); ?></textarea> </li> </ul> </div> </div> </div> </div> </div> </div> <input type="hidden" name="task" value="" /> </form> </div> <?php }
function front_end_video_player($videos, $paramssld, $video_player) { ob_start(); $video_playerID = $video_player[0]->id; $video_playertitle = $video_player[0]->name; $video_playeralbum = $video_player[0]->album_single; $path_site = plugins_url("../images", __FILE__); switch ($video_playeralbum) { case 'single': $j = 0; ?> <script> jQuery(document).ready(function(){ var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }); function onYouTubeIframeAPIReady(){ <?php foreach ($videos as $video) { if ($video->sl_type == "youtube") { $video_thumb_url = get_youtube_thumb_id_from_url($video->video_url_1); ?> var youtube_single_player_<?php echo $video->id; ?> ; youtube_single_player_<?php echo $video->id; ?> = new YT.Player('youtube_single_player_<?php echo $video->id; ?> ',{ videoId : '<?php echo $video_thumb_url; ?> ', enablejsapi : 1, playerVars:{ 'autohide': <?php echo $paramssld['video_pl_yt_autohide']; ?> , 'autoplay': <?php if ($j == 0) { echo $video_player[0]->autoplay; } else { echo 0; } ?> , 'controls': 1, 'fs': <?php echo $paramssld['video_pl_yt_fullscreen']; ?> , 'disablekb': 0, 'modestbranding': 1, 'enablejsapi': 1, // 'cc_load_policy': 1, // forces closed captions on 'iv_load_policy': <?php echo $paramssld['video_pl_yt_annotation']; ?> , // annotations, 1=on, 3=off 'rel': 1, 'showinfo': <?php echo $paramssld['video_pl_yt_showinfo']; ?> , 'theme': '<?php echo $paramssld['video_pl_yt_theme']; ?> ', // dark, light 'color': '<?php echo $paramssld['video_pl_yt_color']; ?> ' // red, white }, }); if(<?php echo $video_player[0]->autoplay; ?> ==0){ jQuery("#youtube_single_player_container_<?php echo $video->id; ?> .thumbnail_block").css({display:'block'}); } jQuery("#youtube_single_player_container_<?php echo $video->id; ?> .thumbnail_block").on("click",function(){ jQuery("#youtube_single_player_container_<?php echo $video->id; ?> .thumbnail_block").css({display:'none'}); youtube_single_player_<?php echo $video->id; ?> .playVideo(); }); function ythw<?php echo $video->id; ?> (){ var w=<?php echo $video_player[0]->width; ?> ; if(jQuery("#youtube_single_player_container_<?php echo $video->id; ?> ").parent().width()<w){ document.getElementById("youtube_single_player_container_<?php echo $video->id; ?> ").style.width="100%"; var w=document.getElementById("youtube_single_player_container_<?php echo $video->id; ?> ").offsetWidth; document.getElementById("youtube_single_player_container_<?php echo $video->id; ?> ").style.height=w*0.56+"px"; }else{ document.getElementById("youtube_single_player_container_<?php echo $video->id; ?> ").style.width="<?php echo $video_player[0]->width; ?> px"; document.getElementById("youtube_single_player_container_<?php echo $video->id; ?> ").style.height="<?php echo $video_player[0]->width * 0.5600000000000001; ?> px"; } } ythw<?php echo $video->id; ?> (); jQuery(window).on("resize",function(){ ythw<?php echo $video->id; ?> (); }); <?php } } ?> } </script> <?php foreach ($videos as $video) { $video_playeralbum = $video->sl_type; switch ($video_playeralbum) { case 'video': $i = rand(1, 100000); ?> <script type="text/javascript"> /*init snigle video player when document is ready*/ jQuery(document).ready(function(){ init_huge_it_single_video_player_<?php echo $i; ?> ("#huge_it_sigle_video_player_<?php echo $i; ?> "); }); /* Single Player */ function init_huge_it_single_video_player_<?php echo $i; ?> (video_container_id){ var container,video,thumb_box,thumb,paused,dragging,volume_dragging,volume,progress_duration_bar,progress_bar,progress_played_bar,progress_thumb,progress_buffered,current_time,duration_time,current_time_text,duration_time_text,autoplay,video_param_width,video_width,play_btn,center_play_icon,center_pause_icon,center_wait_icon,backward_btn,forward_btn,mute_btn,volume_handle,volume_before,volume_current,volume_after,fullscreen_btn,hover_timer_box,hover_timer; current_time="00"; duration_time="00"; volume=1; dragging=""; paused=""; volume_dragging=""; /* PLUGIN PARAMETERS */ <?php if ($video_player[0]->autoplay == 1) { $autoplay = "true"; } else { $autoplay = "false"; } ?> autoplay='<?php echo $autoplay; ?> '; video_width=<?php echo $video_player[0]->width; ?> ;; video_param_width=<?php echo $video_player[0]->width; ?> ; /* check if video player exists */ container=document.querySelector(video_container_id); if(container){ /* SET OBJECT LISTENERS */ /* *** */ video=container.querySelector("video"); play_btn=container.querySelector(".play_pause"); center_play_icon=container.querySelector(".center_play"); center_pause_icon=container.querySelector(".center_pause"); center_wait_icon=container.querySelector(".center_wait"); backward_btn=container.querySelector(".fast_back"); forward_btn=container.querySelector(".fast_forward"); mute_btn=container.querySelector(".mute_button"); volume_handle=container.querySelector(".volume_handle"); volume_before=container.querySelector(".volume_before"); volume_current=container.querySelector(".volume_current"); volume_after=container.querySelector(".volume_after"); fullscreen_btn=container.querySelector(".full_screen"); current_time_text=container.querySelector(".current_time"); duration_time_text=container.querySelector(".duration_time"); progress_bar=container.querySelector(".huge_it_video_player_duration_slide"); progress_played_bar=container.querySelector(".played"); progress_thumb=container.querySelector(".thumb"); progress_buffered=container.querySelector(".buffered"); hover_timer_box=container.querySelector(".hover_timer"); hover_timer=container.querySelector(".hover_timer_time"); thumb_box=container.querySelector(".thumbnail_block"); thumb=container.querySelector(".thumbnail_block img"); /* *** */ /* FUNCTIONS */ function timeupdate(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } video_width=video.offsetWidth; var curmins = Math.floor(video.currentTime / 60); var cursecs = Math.floor(video.currentTime - curmins * 60); var durmins = Math.floor(video.duration / 60); var dursecs = Math.floor(video.duration - durmins * 60); if(cursecs < 10){ cursecs = "0"+cursecs; } if(dursecs < 10){ dursecs = "0"+dursecs; } if(curmins < 10){ curmins = "0"+curmins; } if(durmins < 10){ durmins = "0"+durmins; } current_time_text.innerHTML = curmins+":"+cursecs; duration_time_text.innerHTML = durmins+":"+dursecs; var current_time_percent = current_time*(100/duration_time); var progress_bar_pixels=(current_time_percent*video_width)/100; progress_played_bar.style.width=progress_bar_pixels+"px"; console.log(progress_thumb.offsetWidth); if(progress_bar_pixels+progress_thumb.offsetWidth/2 > video_width){ var last_px = video_width-progress_thumb.offsetWidth/2; progress_thumb.style.left=last_px+"px"; }else if(progress_bar_pixels < progress_thumb.offsetWidth/2){ var first_px = progress_thumb.offsetWidth/2; progress_thumb.style.left=first_px+"px"; }else{ progress_thumb.style.left=progress_bar_pixels+"px"; } } function progressHandler(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } if(!video.paused){ play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; } if(thumb_box.style.display=="block" && !video.paused){ thumb_box.style.display="none"; } if(video.buffered.length > 0){ var i=video.buffered.length; var buffered_end=video.buffered.end(i-1); var loaded_percent=(buffered_end/duration_time)*100; var progress_bar_pixels=(loaded_percent*video_width)/100; progress_buffered.style.width=progress_bar_pixels+"px"; } if(!isFullScreen() && hasClass("hide_controls",container)){ removeClass("hide_controls",container); } } function VideoClickPlayPause(){ if(video.paused){ /* PLAY THE VIDEO */ video.play(); paused=""; addClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; center_play_icon.style.webkitAnimationName="popup"; center_play_icon.style.display="block"; setTimeout(function(){ center_play_icon.removeAttribute("style"); },500); }else{ /* PAUSE THE VIDEO */ video.pause(); paused=1; removeClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-play"></i>'; center_pause_icon.style.webkitAnimationName="popup"; center_pause_icon.style.display="block"; setTimeout(function(){ center_pause_icon.removeAttribute("style"); },500); } } function PlayPause(){ if(hasClass("poster",container)){ video.play(); paused=""; thumb_box.style.display="none"; removeClass("poster",container); addClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; }else{ if(video.paused){ /* PLAY THE VIDEO */ video.play(); paused=""; addClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; }else{ /* PAUSE THE VIDEO */ video.pause(); paused=1; removeClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-play"></i>'; } } } function step_back(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } video.currentTime=current_time-15; } function step_forward(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } video.currentTime=current_time+15; } function toggle_mute(){ if(video.muted){ video.muted=false; if(volume<0.7){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } var volume_handle_width=volume_handle.offsetWidth; var volume_current_pixels=volume*volume_handle_width; volume_before.style.width=volume_current_pixels+"px"; volume_current.style.left=volume_current_pixels+"px"; }else{ var volume_handle_width=volume_handle.offsetWidth; var volume_current_width=volume_before.offsetWidth; volume=volume_current_width/volume_handle_width; video.muted=true; mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; volume_before.style.width="0px"; volume_current.style.left="0px"; } } function saveVolume(){ var volume_handle_width=volume_handle.offsetWidth; var volume_current_pixels=volume*volume_handle_width; volume_before.style.width=volume_current_pixels+"px"; volume_current.style.left=volume_current_pixels+"px"; } function exitHandler(){ if (isFullScreen()) console.log(""); // nothing else cFullScreen(); } function toggle_full_screen(){ if (isFullScreen()) cFullScreen(); else requestFullScreen(container || document.documentElement); jQuery.when(toggle_full_screen).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; timeupdate(); progressHandler(); saveVolume(); },800); }); } function isFullScreen(){ return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen; } function vidSeeking(e){ var x = e.clientX; var l=container.getBoundingClientRect().left; var pos = x-l; if(pos>=0 && pos<video_width){ progress_played_bar.style.width = pos+"px"; progress_thumb.style.left = pos+"px"; var current_percent=(pos/video_width)*100; var seekto=duration_time*(current_percent/100); video.currentTime=seekto; } } function requestFullScreen(element){ if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); else if (element.mozRequestFullScreen) element.mozRequestFullScreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen(); addClass("fullscreen",container); fullscreen_btn.innerHTML='<i class="hugeicons hugeicons-compress"></i>'; jQuery.when(requestFullScreen).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; timeupdate(); progressHandler(); saveVolume(); },500); }); } function cFullScreen(){ if (document.exitFullscreen) document.exitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); removeClass("fullscreen",container); removeClass("hide_controls",container); fullscreen_btn.innerHTML='<i class="hugeicons hugeicons-expand"></i>'; jQuery.when(cFullScreen).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; timeupdate(); progressHandler(); saveVolume(); },500); }); } function setVolume(e){ var x = e.clientX; var l=volume_handle.getBoundingClientRect().left; var pos = x-l; if(pos>0 && pos<=volume_handle.offsetWidth){ volume_before.style.width=pos+"px"; volume_current.style.left=pos+"px"; var volume_handle_width=volume_handle.offsetWidth; var current_percent=(pos/volume_handle_width)*100; volume=current_percent/100; video.muted=false; video.volume=current_percent/100; if(current_percent<70){ if(current_percent==0){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; } }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } }else{ if(pos<=0){ video.muted=true; mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; volume_before.style.width="0px"; volume_current.style.left="0px"; } } } function waiting(){ center_wait_icon.style.display="block"; center_wait_icon.style.opacity="1"; } function notWaiting(){ center_wait_icon.style.display="none"; center_wait_icon.style.opacity="0"; } function videoEnd(){ play_btn.innerHTML ='<i class="hugeicons hugeicons-refresh"></i>'; paused=1; removeClass("playing",container); } function timerDisplay(e){ if(video.buffered.length > 0){ var x = e.clientX; var l=container.getBoundingClientRect().left; var w=hover_timer_box.offsetWidth; var pos = x-l; var mouse_pos_percent= (pos/video_width)*100; var mouse_pos_time=duration_time*(mouse_pos_percent/100); var curmins = Math.floor(mouse_pos_time / 60); var cursecs = Math.floor(mouse_pos_time - curmins * 60); if(cursecs < 10){ cursecs="0"+cursecs; } if(curmins < 10){ curmins="0"+curmins; } //hover_timer_box.style.webkitAnimationName="opacity"; hover_timer_box.style.opacity="1"; hover_timer_box.style.display = "block"; hover_timer_box.style.left = x-l-w/2+"px"; hover_timer.innerHTML = curmins+":"+cursecs; } } function timerNotDisplay(e){ hover_timer_box.style.display = "none"; } function keyFunctions(e){ switch(e.keyCode){ case 40: var curent_volume=video.volume; var curent_volume_percent=curent_volume*100; if(curent_volume_percent>0){ var new_volume_percent=curent_volume_percent-10; if(new_volume_percent<=0){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; volume_before.style.width="0px"; volume_current.style.left="0px"; video.muted=true; volume=0; }else{ if(new_volume_percent<70){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } var new_volume=new_volume_percent/100; var volume_handle_width=volume_handle.offsetWidth; var new_position=new_volume*volume_handle_width; volume_before.style.width=new_position+"px"; volume_current.style.left=new_position+"px"; video.muted=false; video.volume=new_volume; volume=new_volume; } } e.preventDefault(); break; case 38: var curent_volume=video.volume; var curent_volume_percent=curent_volume*100; if(curent_volume_percent<100){ var new_volume_percent=curent_volume_percent+10; if(new_volume_percent>100){ new_volume_percent=100; } if(new_volume_percent<70){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } var new_volume=new_volume_percent/100; var volume_handle_width=volume_handle.offsetWidth; var new_position=new_volume*volume_handle_width; volume_before.style.width=new_position+"px"; volume_current.style.left=new_position+"px"; video.volume=new_volume; video.muted=false; volume=new_volume; } e.preventDefault(); break; case 39: step_forward(); e.preventDefault(); break; case 37: step_back(); e.preventDefault(); break; case 32: VideoClickPlayPause(); e.preventDefault(); break; } } function huge_it_single_video_responsive(){ var video_parent=container.parentNode; var computedStyle = getComputedStyle(video_parent); var video_parent_width=video_parent.clientWidth-parseFloat(computedStyle.paddingRight)-parseFloat(computedStyle.paddingLeft); if(!isFullScreen()){ if(video_parent_width<=video_param_width){ /*container.style.width="100%";*/ addClass("fullwidth",container); jQuery.when(huge_it_single_video_responsive).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; videoResize(); },500); }); }else{ removeClass("fullwidth",container); /*container.style.width=video_param_width+"px";*/ jQuery.when(huge_it_single_video_responsive).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; videoResize(); },500); }); } }else{ setTimeout(function(){ video_width=video.offsetWidth; },500); } } function videoResize(){ setTimeout(function(){ video_width=video.offsetWidth; timeupdate(); progressHandler(); saveVolume(); if(video_width<325){ addClass("small",container); }else{ removeClass("small",container); } if(video_width<225){ addClass("very_small",container); }else{ removeClass("very_small",container); } },200); } /* helping functions */ /* *** */ function addClass( classname, element ) { var cn = element.className; /*test for existance */ if( cn.indexOf( classname ) != -1 ) { return; } /* add a space if the element already has class */ if( cn != '' ) { classname = ' '+classname; } element.className = cn+classname; } function removeClass( classname, element ) { var cn = element.className; var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" ); cn = cn.replace( rxp, '' ); element.className = cn; } function hasClass(cls, element) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } /* *** */ /* ADD EVENT LISTENERS */ /* *** */ video.addEventListener("timeupdate",timeupdate,false); video.addEventListener("playing",progressHandler,false); video.addEventListener("loadeddata",progressHandler,false); video.addEventListener("canplaythrough",progressHandler,false); video.addEventListener("progress",progressHandler,false); video.addEventListener("waiting",waiting,false); video.addEventListener("canplay",notWaiting,false); video.addEventListener("ended",videoEnd,false); video.addEventListener("resize",videoResize,false); /* *** */ video.addEventListener("click",VideoClickPlayPause,false); video.addEventListener("dblclick",toggle_full_screen,false); center_play_icon.addEventListener("click",VideoClickPlayPause,false); center_pause_icon.addEventListener("click",VideoClickPlayPause,false); center_wait_icon.addEventListener("click",VideoClickPlayPause,false); thumb_box.addEventListener("click",PlayPause,false); play_btn.addEventListener("click",PlayPause,false); backward_btn.addEventListener("click",step_back,false); forward_btn.addEventListener("click",step_forward,false); mute_btn.addEventListener("click",toggle_mute,false); fullscreen_btn.addEventListener("click",toggle_full_screen,false); container.addEventListener('webkitfullscreenchange', exitHandler, false); container.addEventListener('mozfullscreenchange', exitHandler, false); container.addEventListener('fullscreenchange', exitHandler, false); container.addEventListener('MSFullscreenChange', exitHandler, false); progress_bar.addEventListener("mouseover",timerDisplay,false); progress_bar.addEventListener("mousemove",timerDisplay,false); progress_bar.addEventListener("mouseout",timerNotDisplay,false); /* KEYBOARD */ /* *** */ container.addEventListener("mouseover",function(){ window.addEventListener("keydown",keyFunctions,false); },false) container.addEventListener("mouseout",function(){ window.removeEventListener("keydown",keyFunctions,false); },false) /* *** */ /* VIDEO SEEKING */ progress_bar.addEventListener("mousedown",function(e){ dragging=1; vidSeeking(e); },false); window.addEventListener("mousemove",function(e){ if(dragging==1){ if(paused!=1){ video.pause(); } removeClass("playing",container); vidSeeking(e); } },false); window.addEventListener("mouseup",function(){ if(dragging==1){ if(paused!==1){ video.play(); } addClass("playing",container); dragging=""; } },false); /* VOLUME CHANGING */ volume_handle.addEventListener("mousedown",function(e){ volume_dragging=1; setVolume(e); },false); window.addEventListener("mousemove",function(e){ if(volume_dragging==1){ setVolume(e); } },false); window.addEventListener("mouseup",function(){ if(volume_dragging==1){ volume_dragging=""; } },false); /* *** */ /* ONLOAD STUFF */ /* *** */ if(autoplay=="true"){ video.autoplay = true; addClass("playing",container); removeClass("poster",container); thumb_box.style.display="none"; play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; }else{ video.autoplay = false; removeClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-play"></i>'; addClass("poster",container); thumb_box.style.display="block"; } huge_it_single_video_responsive(); jQuery(window).on("resize",function(){ huge_it_single_video_responsive(); }); var timeout; container.onmousemove = function(){ if(isFullScreen()){ removeClass("hide_controls",container); clearTimeout(timeout); timeout = setTimeout(function(){ addClass("hide_controls",container); },3000); } } /* *** */ } } </script> <style> /* parameters */ #huge_it_sigle_video_player_<?php echo $i; ?> { width:<?php echo $video_player[0]->width; ?> px; <?php switch ($paramssld['video_pl_position']) { case "left": ?> float:left; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; <?php break; case "right": ?> float:right; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; <?php break; case "center": ?> margin:0px auto; <?php break; } ?> margin-top:<?php echo $paramssld['video_pl_margin_top']; ?> px; margin-bottom:<?php echo $paramssld['video_pl_margin_bottom']; ?> px; border:<?php echo $paramssld['video_pl_border_size']; ?> px solid #<?php echo $paramssld['video_pl_border_color']; ?> ; } #huge_it_sigle_video_player_<?php echo $i; ?> .thumbnail_block { background:#<?php echo $paramssld['video_pl_background_color']; ?> ; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom { background:rgba(<?php echo hex2RGB($paramssld['video_pl_controls_panel_color']); ?> ,<?php echo $paramssld['video_pl_controls_panel_opacity'] / 100; ?> ); } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_center { color:#<?php echo $paramssld['video_pl_buttons_color']; ?> !important; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .control { color:#<?php echo $paramssld['video_pl_buttons_color']; ?> !important; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .control:hover { color:#<?php echo $paramssld['video_pl_buttons_hover_color']; ?> !important; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide { background:transparent; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration { background:rgba(<?php echo hex2RGB($paramssld['video_pl_timeline_background']); ?> ,<?php echo $paramssld['video_pl_timeline_background_opacity'] / 100; ?> ); } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { background:rgba(<?php echo hex2RGB($paramssld['video_pl_timeline_buffering_color']); ?> ,<?php echo $paramssld['video_pl_timeline_buffering_opacity'] / 100; ?> ); } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_before, #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played{ background:#<?php echo $paramssld['video_pl_timeline_color']; ?> ; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { background:#<?php echo $paramssld['video_pl_timeline_slider_color']; ?> ; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer .current_time { color:#<?php echo $paramssld['video_pl_curtime_color']; ?> ; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer .separator, #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer .duration_time { color:#<?php echo $paramssld['video_pl_durtime_color']; ?> ; } /* static */ #huge_it_sigle_video_player_<?php echo $i; ?> { position:relative; display:table; height:auto; font-size:15px; font-weight:normal; font-family:Roboto, Arial, Helvetica, sans-serif; font-style:normal; line-height:1; text-indent:0px; user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none; transition:width .3s linear,height .3s linear; box-sizing: content-box; } #huge_it_sigle_video_player_<?php echo $i; ?> .poster { overflow:hidden; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullwidth { width:100%; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen { width:100%; transition:none; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen video { width:100%; max-height:100%; } #huge_it_sigle_video_player_<?php echo $i; ?> div[data-title]:hover:after { content: attr(data-title); padding:8px 10px; color: #fff; position: absolute; left:0; bottom: calc(100% + 20px); bottom: -webkit-calc(100% + 20px); bottom: -moz-calc(100% + 20px); bottom: -ms-calc(100% + 20px); bottom: -o-calc(100% + 20px); white-space: nowrap; z-index:6; font-size:12px; background:#444; border-radius:2px; line-height:1; -moz-transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1); } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_player { position:relative; float:left; display:block; width:100%; height:100%; margin:0px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_player video { position:relative; float:left; display:block; width:100%; height:auto; margin:0px; z-index:5; background:#000; } #huge_it_sigle_video_player_<?php echo $i; ?> .thumbnail_block { position:absolute; display:none; left:0px; top:0px; width:100%; height:100%; overflow:hidden; z-index:10; text-align:center; vertical-align:middle; } #huge_it_sigle_video_player_<?php echo $i; ?> .thumbnail_block:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } #huge_it_sigle_video_player_<?php echo $i; ?> .poster .thumbnail_block { display:block; } #huge_it_sigle_video_player_<?php echo $i; ?> .thumbnail_block img { display:block; position:absolute; top:0px; left:0px; min-width:100%; min-height:100%; max-width:none; } #huge_it_sigle_video_player_<?php echo $i; ?> .thumbnail_block .thumbnail_play { position:absolute; display:block; left:50%; top:50%; margin:-30px 0px 0px -30px; width:60px; height:60px; font-size:58px; line-height:60px; text-align:center; color:#f12b24; cursor:poiner; transition:transform .5s cubic-bezier(0.0,0.0,0.2,1); cursor:pointer; } #huge_it_sigle_video_player_<?php echo $i; ?> .thumbnail_block .thumbnail_play:hover { transform:scale(1.05,1.05); } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_top { position: absolute; top: 0px; left: 0px; width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); width: -ms-calc(100% - 30px); padding: 15px; background:rgba(0,0,0,.1); cursor: pointer; overflow: hidden; z-index:11; webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); } #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_top, #huge_it_sigle_video_player_<?php echo $i; ?> .hide_controls.playing .huge_it_video_player_top { opacity:0; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing:not(.hide_controls):hover .huge_it_video_player_top { opacity:1; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_top .video_title { color: #fff; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom { position:absolute; display:block; bottom:0px; left:0px; height:50px; width:100%; z-index:6; webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom { height:80px; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom { opacity:0; } #huge_it_sigle_video_player_<?php echo $i; ?> .hide_controls.playing .huge_it_video_player_bottom { opacity:0; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing:not(.hide_controls):hover .huge_it_video_player_bottom { opacity:1; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide { position:absolute; left:0px; bottom:30px; display:block; width:100%; height:20px; margin:0px; line-height:1; cursor:pointer; -moz-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide { height:30px; bottom:50px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration { position:absolute; display:block; bottom:7.5px; left:0px; width:100%; height:5px; z-index:6; -moz-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration { bottom:11px; height:8px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played { position:absolute; display:block; bottom:7.5px; left:0px; width:0px; height:5px; z-index:8; -moz-transition:height .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:height .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:height .1s cubic-bezier(0.0,0.0,0.2,1); transition:height .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played { bottom:11px; height:8px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { position:absolute; display:block; bottom:3.5px; left:0px; width:13px; height:13px; margin-left:-6.5px; background:#f12b24; border-radius:6.5px; z-index:9; cursor:pointer; -moz-transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { bottom:5px; width:20px; height:20px; border-radius:10px; margin-left:-10px; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { transform:scale(0,0); } #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .thumb { transform:scale(1,1); } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { position:absolute; display:block; bottom:7.5px; left:0px; width:0px; height:5px; z-index:7; -moz-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { bottom:11px; height:8px; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration, #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played, #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { bottom:8.5px; height:3px; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration, #huge_it_sigle_video_player_<?php echo $i; ?> .playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played, #huge_it_sigle_video_player_<?php echo $i; ?> .playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { bottom:12.5px; height:5px; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .duration, #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .played, #huge_it_sigle_video_player_<?php echo $i; ?> .playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .buffered { bottom:7.5px; height:5px; } #huge_it_sigle_video_player_<?php echo $i; ?> .playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .duration, #huge_it_sigle_video_player_<?php echo $i; ?> .playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .played, #huge_it_sigle_video_player_<?php echo $i; ?> .playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .buffered { bottom:11px; height:8px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_duration_slide .hover_timer { position: absolute; display:none; left:0; bottom:100%; padding: 5px 9px; max-width: 200px; background:rgba(28,28,28,0.8); border-radius:2px; white-space: nowrap; word-wrap: normal; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size:11px; line-height:1; color: #fff; z-index:6; -moz-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; -moz-transition:opacity .1s cubic-bezier(0.4,0.0,1,1); -webkit-transition:opacity .1s cubic-bezier(0.4,0.0,1,1); -ms-transition:opacity .1s cubic-bezier(0.4,0.0,1,1); transition:opacity .1s cubic-bezier(0.4,0.0,1,1); -webkit-animation-duration:.1s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: cubic-bezier(0.4,0.0,1,1); opacity:0; } @-webkit-keyframes opacity { 0% { opacity:0; } 100% { opacity:1; } } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls { position:absolute; left:0px; bottom:0px; display:block; width:100%; height:30px; margin:0px; } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls { text-align:center; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls { height:50px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .control { position:relative; display:inline-block; width:30px; height:30px; margin:0px 0px 0px 5px; font-size:16px; line-height:30px; text-align:center; vertical-align:top; cursor:pointer; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .control { width:50px; height:50px; margin:0px 0px 0px 5px; font-size:30px; line-height:50px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .fast_back { } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls .fast_back { display:none; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .play_pause { } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls .play_pause { float:left; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .fast_forward { } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls .fast_forward { display:none; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .mute_button { } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls .mute_button { float:left; } #huge_it_sigle_video_player_<?php echo $i; ?> .very_small .huge_it_video_player_bottom .huge_it_video_player_controls .mute_button { display:none; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { position:relative; display:inline-block; width:50px; height:30px; background: none; cursor: pointer; } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { float:left; } #huge_it_sigle_video_player_<?php echo $i; ?> .very_small .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { display:none; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { position:relative; display:inline-block; width:100px; height:50px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_before { position: absolute; top:13.5px; left:0px; height:3px; width:50px; z-index:7; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_before { top:22.5px; height:5px; width:100px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_current { position: absolute; top:8.5px; left:50px; height:13px; width: 4px; margin-left:-2px; background: #fff; z-index:8; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_current { top:15px; height:20px; width:6px; margin-left:-3px; left:100px; width: 4px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_after { position: absolute; top:13.5px; left:0px; height:3px; width:50px; background:#fff; z-index:6; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_after { top:22.5px; height:5px; width:100px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer { position:relative; display:inline-block; min-width:50px; height:30px; margin:0px 0px 0px 5px; vertical-align:top; font-size:11px; line-height:30px; font-style:normal; font-weight:normal; text-align:center; cursor:pointer; } #huge_it_sigle_video_player_<?php echo $i; ?> .fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .timer { height:50px; font-size:14px; line-height:50px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer .current_time { display:inline-block; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer .separator { display:inline-block; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .timer .duration_time { display:inline-block; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_bottom .huge_it_video_player_controls .full_screen { float:right; } #huge_it_sigle_video_player_<?php echo $i; ?> .small .huge_it_video_player_bottom .huge_it_video_player_controls .full_screen { float:right; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_center { text-align:center; font-size:15px; line-height:40px; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_center div { position:absolute; display:none; left:50%; top:50%; margin-top:-20px; height:40px; width:40px; margin-left:-20px; background: rgba(0,0,0,.2); border-radius: 100%; text-align:center; transition:all .5s linear; -webkit-animation-duration:.5s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: linear; z-index:6; opacity:0; } #huge_it_sigle_video_player_<?php echo $i; ?> .huge_it_video_player_center .center_wait { background:transparent; } @-webkit-keyframes popup { 0% { opacity:1; transform:scale(1,1); } 100% { opacity:0; transform:scale(3,3); } } </style> <div id="huge_it_sigle_video_player_<?php echo $i; ?> "> <div class="huge_it_video_player_player"> <video src="<?php echo $video->video_url_1; ?> " data-current="--" data-duration="--"> Your browser does not support HTML5 video. </video> </div> <div class="thumbnail_block"> <img src="<?php echo $video->image_url; ?> " alt="poster" /> <div class="thumbnail_play"><i class="hugeicons hugeicons-play-circle-o"></i></div> </div> <div class="huge_it_video_player_top"> <div class="video_title"><?php echo $video->name; ?> </div> </div> <div class="huge_it_video_player_bottom"> <div class="huge_it_video_player_duration_slide"> <div class="duration"></div> <div class="played"></div> <div class="thumb"></div> <div class="buffered"></div> <div class="hover_timer"> <span class="hover_timer_time">00:00</span> </div> </div> <div class="huge_it_video_player_controls"> <div class="fast_back control" data-title="Fast backward"><i class="hugeicons hugeicons-step-backward"></i></div> <div class="play_pause control" data-title="Play"><i class="hugeicons hugeicons-play"></i></div> <div class="fast_forward control" data-title="Fast forward"><i class="hugeicons hugeicons-step-forward"></i></div> <div class="mute_button control" data-title="Mute"><i class="hugeicons hugeicons-volume-up"></i></div> <div class="volume_handle"> <div class="volume_before"></div> <div class="volume_current"></div> <div class="volume_after"></div> </div> <div class="timer"> <div class="current_time">--</div> <div class="separator"> / </div> <div class="duration_time">--</div> </div> <div class="full_screen control" data-title="Full Screen"><i class="hugeicons hugeicons-expand"></i></div> </div> </div> <div class="huge_it_video_player_center"> <div class="center_play"><i class="hugeicons hugeicons-play"></i></div> <div class="center_pause"><i class="hugeicons hugeicons-pause"></i></div> <div class="center_wait"><i class="hugeicons hugeicons-spinner hugeicons-pulse"></i></div> </div> </div> <?php break; case 'youtube': $i = rand(1, 100000); ?> <style> #youtube_single_player_container_<?php echo $video->id; ?> { display:block; position:relative; <?php switch ($paramssld['video_pl_position']) { case "left": ?> float:left; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; <?php break; case "right": ?> float:right; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; <?php break; case "center": ?> display:block; margin:0px auto; <?php break; } ?> margin-top:<?php echo $paramssld['video_pl_margin_top']; ?> px; margin-bottom:<?php echo $paramssld['video_pl_margin_bottom']; ?> px; max-width:none; width:<?php echo $video_player[0]->width; ?> px; height:<?php echo floor($video_player[0]->width * 0.5600000000000001); ?> px; box-sizing:content-box; border:<?php echo $paramssld['video_pl_border_size']; ?> px solid #<?php echo $paramssld['video_pl_border_color']; ?> ; } #youtube_single_player_<?php echo $video->id; ?> { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:5; } #youtube_single_player_container_<?php echo $video->id; ?> .thumbnail_block { position:absolute; display:none; top:0px; left:0px; width:100%; height:100%; overflow:hidden; z-index:6; } #youtube_single_player_container_<?php echo $video->id; ?> .thumbnail_block .thumb { position:absolute; left:0px; top:0px; min-width:100%; min-height:100%; max-width:none; vertical-align:middle } #youtube_single_player_container_<?php echo $video->id; ?> .thumbnail_block .play { position:absolute; left:50%; top:50%; width:70px; height:49px; margin-left:-35px; margin-top:-24.5px; cursor:pointer; } </style> <div id="youtube_single_player_container_<?php echo $video->id; ?> "> <div id="youtube_single_player_<?php echo $video->id; ?> "></div> <div class="thumbnail_block"> <img class="thumb" src="<?php echo $video->image_url; ?> " alt="<?php echo $video->name; ?> " /> <img class="play" src="<?php echo plugins_url("../images/play.youtube.png", __FILE__); ?> " alt="youtube play" /> </div> </div> <?php break; case "vimeo": $i = rand(1, 100000); $vid = $video->video_url_1; $vid = explode("/", $vid); $vidid = end($vid); if ($j == 0) { $autoplay = $video_player[0]->autoplay; } else { $autoplay = 0; } $vidurl = "https://player.vimeo.com/video/" . $vidid . "?player_id=vimeo_single_player_" . $video->id . "&color=" . $paramssld['video_pl_vimeo_color'] . "&autoplay=" . $autoplay; ?> <script> jQuery(document).ready(function(){ function vimhw<?php echo $i; ?> (){ var w=<?php echo $video_player[0]->width; ?> ; if(jQuery("#vimeo_single_player_<?php echo $video->id; ?> ").parent().width()<=w){ document.getElementById("vimeo_single_player_<?php echo $video->id; ?> ").style.width="100%"; var w=document.getElementById("vimeo_single_player_<?php echo $video->id; ?> ").offsetWidth; document.getElementById("vimeo_single_player_<?php echo $video->id; ?> ").style.height=w*0.56+"px"; }else{ document.getElementById("vimeo_single_player_<?php echo $video->id; ?> ").style.width="<?php echo $video_player[0]->width; ?> px"; document.getElementById("vimeo_single_player_<?php echo $video->id; ?> ").style.height="<?php echo $video_player[0]->width * 0.5600000000000001; ?> px"; } } if((<?php echo $j; ?> ==0 && <?php echo $video_player[0]->autoplay; ?> ==0) || <?php echo $j; ?> !=0){ jQuery("#vimeo_single_player_container_<?php echo $video->id; ?> .thumbnail_block").css({display:'block'}); } jQuery("#vimeo_single_player_container_<?php echo $video->id; ?> .thumbnail_block").on("click",function(){ jQuery("#vimeo_single_player_container_<?php echo $video->id; ?> .thumbnail_block").css({display:'none'}); jQuery("#vimeo_single_player_container_<?php echo $video->id; ?> #vimeo_single_player_<?php echo $video->id; ?> ").attr("src","https://player.vimeo.com/video/<?php echo $vidid; ?> ?player_id=vimeo_single_player_<?php echo $video->id; ?> &color=<?php echo $paramssld['video_pl_vimeo_color']; ?> &autoplay=1"); }); vimhw<?php echo $i; ?> (); jQuery(window).on("resize",function(){ vimhw<?php echo $i; ?> (); }); }); </script> <style> #vimeo_single_player_container_<?php echo $video->id; ?> { display:block; position:relative; <?php switch ($paramssld['video_pl_position']) { case "left": ?> float:left; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; <?php break; case "right": ?> float:right; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; <?php break; case "center": ?> display:block; margin:0px auto; <?php break; } ?> margin-top:<?php echo $paramssld['video_pl_margin_top']; ?> px; margin-bottom:<?php echo $paramssld['video_pl_margin_bottom']; ?> px; width:<?php echo $video_player[0]->width; ?> px; max-width:none; height:<?php $ff = round($video_player[0]->width * 0.5600000000000001); echo $ff; ?> px; box-sizing:content-box; border:<?php echo $paramssld['video_pl_border_size']; ?> px solid #<?php echo $paramssld['video_pl_border_color']; ?> ; } #vimeo_single_player_<?php echo $video->id; ?> { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:5; } #vimeo_single_player_container_<?php echo $video->id; ?> .thumbnail_block { position:absolute; display:none; top:0px; left:0px; width:100%; overflow:hidden; height:100%; z-index:6; } #vimeo_single_player_container_<?php echo $video->id; ?> .thumbnail_block .thumb { position:absolute; left:0px; top:0px; width:100%; max-height:none; vertical-align:middle } #vimeo_single_player_container_<?php echo $video->id; ?> .thumbnail_block .play { position:absolute; left:50%; top:50%; width:70px; height:49px; margin-left:-35px; margin-top:-24.5px; cursor:pointer; } </style> <div id="vimeo_single_player_container_<?php echo $video->id; ?> "> <iframe id="vimeo_single_player_<?php echo $video->id; ?> " width="<?php echo $video_player[0]->width; ?> " height="<?php echo $video_player[0]->width * 0.5600000000000001; ?> " src="<?php echo $vidurl; ?> " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <div class="thumbnail_block"> <img class="thumb" src="<?php echo $video->image_url; ?> " alt="<?php echo $video->name; ?> " /> <img class="play" src="<?php echo plugins_url("../images/play.vimeo.png", __FILE__); ?> " alt="vimeo play" /> </div> </div> <?php break; } $j++; } ?> <?php break; /////////////////////////////////////////////////////album/////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////album/////////////////////////////////////////////////////////////////////////////////////////////////////////// case 'album': $i = rand(1, 1000); ?> <script> var YTdeferred =jQuery.Deferred(); window.onYouTubeIframeAPIReady = function() { // resolve when youtube callback is called // passing YT as a parameter YTdeferred.resolve(window.YT); }; /*init Album video player when document is ready*/ jQuery(document).ready(function(){ var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); init_huge_it_playlist_vide_player_<?php echo $i; ?> ("#huge_it_album_video_player_<?php echo $i; ?> "); // Listen for the ready event for any vimeo video players on the page function init_huge_it_playlist_vide_player_<?php echo $i; ?> (video_container_id){ var playlist_autoplay,player_width,video_width,video_param_width,global_container,container,load_icon,youtube,jQ_youtube,vimeo,jQ_vimeo,playlist_container,items; /* PLUGIN PARAMETERS */ playlist_autoplay="false"; player_width=<?php echo $video_player[0]->width; ?> ; <?php if ($video_player[0]->layout == "bottom") { ?> video_width=<?php echo $video_player[0]->width; ?> ; video_param_width=<?php echo $video_player[0]->width; ?> <?php } else { ?> video_width=<?php echo $video_player[0]->width * (3 / 5); ?> ; video_param_width=<?php echo $video_player[0]->width * (3 / 5); ?> ; <?php } ?> video_param_aprox_height=video_param_width*0.7; /* check if video player exists */ global_container=document.querySelector(video_container_id); if(global_container){ /* SET OBJECT LISTENERS */ /* *** */ /* custom video container */ container=global_container.querySelector(".huge_it_player"); load_icon=global_container.querySelector(".load_icon"); /* youtube player container */ youtube=global_container.querySelector("#youtube_player_<?php echo $i; ?> "); jQ_youtube=jQuery("#youtube_player_<?php echo $i; ?> "); /* vimeo player container */ vimeo_js=global_container.querySelector("#vimeo_<?php echo $i; ?> "); jQ_vimeo=jQuery("#vimeo_<?php echo $i; ?> "); /* playlist container */ playlist_container=global_container.querySelector(".playlist_wrapper"); /* playlist items */ items=playlist_container.querySelectorAll("li"); jQ_items=jQuery("#huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper li"); if(items.length){ /* create youtube player */ var youtube_player; YTdeferred.done(function(YT) { youtube_player = new YT.Player('youtube_player_<?php echo $i; ?> ', { autoplay : 0, enablejsapi : 1, playerVars:{ 'autohide': <?php echo $paramssld['video_pl_yt_autohide']; ?> , 'autoplay': 0, 'controls': 1, 'fs': 0, 'disablekb': 0, 'modestbranding': 1, 'enablejsapi': 1, // 'cc_load_policy': 1, // forces closed captions on 'iv_load_policy': <?php echo $paramssld['video_pl_yt_annotation']; ?> , // annotations, 1=on, 3=off // 'playlist': videoID, videoID, videoID, etc, 'rel': 1, 'showinfo': <?php echo $paramssld['video_pl_yt_showinfo']; ?> , 'theme': '<?php echo $paramssld['video_pl_yt_theme']; ?> ', // dark, light 'color': '<?php echo $paramssld['video_pl_yt_color']; ?> ' // red, white }, events : { 'onReady' : onReady, } }); function onReady() { youtube_player.pauseVideo(); youtube_player.addEventListener('onStateChange', function(e) { if(e.data==0){ /* video ended. load next track in playlist */ next_track(); } if(e.data==1){ playlist_autoplay="true"; } }); } var vimeo; var vimeo_player=jQuery('#vimeo_<?php echo $i; ?> ')[0]; vimeo = Froogaloop(vimeo_player); vimeo.addEvent('ready', function() { vimeo.addEvent('finish', function() { next_track(); }); }); /* helping functions */ /* *** */ function addClass( classname, element ) { var cn = element.className; /*test for existance */ if( cn.indexOf( classname ) != -1 ) { return; } /* add a space if the element already has class */ if( cn != '' ) { classname = ' '+classname; } element.className = cn+classname; } function removeClass( classname, element ) { var cn = element.className; var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" ); cn = cn.replace( rxp, '' ); element.className = cn; } function hasClass(cls, element) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function init_playlist_custom_video(src){ var video,thumb_box,thumb,paused,dragging,volume_dragging,volume,progress_duration_bar,progress_bar,progress_played_bar,progress_thumb,progress_buffered,current_time,duration_time,current_time_text,duration_time_text,autoplay,play_btn,center_play_icon,center_pause_icon,center_wait_icon,backward_btn,forward_btn,mute_btn,volume_handle,volume_before,volume_current,volume_after,fullscreen_btn,hover_timer_box,hover_timer; current_time="00"; duration_time="00"; volume=1; dragging=""; paused=""; volume_dragging=""; /* PLUGIN PARAMETERS */ autoplay=playlist_autoplay; /* check if video player exists */ if(container && src!=""){ /* SET OBJECT LISTENERS */ /* *** */ video=container.querySelector("video"); play_btn=container.querySelector(".play_pause"); center_play_icon=container.querySelector(".center_play"); center_pause_icon=container.querySelector(".center_pause"); center_wait_icon=container.querySelector(".center_wait"); backward_btn=container.querySelector(".fast_back"); forward_btn=container.querySelector(".fast_forward"); mute_btn=container.querySelector(".mute_button"); volume_handle=container.querySelector(".volume_handle"); volume_before=container.querySelector(".volume_before"); volume_current=container.querySelector(".volume_current"); volume_after=container.querySelector(".volume_after"); fullscreen_btn=container.querySelector(".full_screen"); current_time_text=container.querySelector(".current_time"); duration_time_text=container.querySelector(".duration_time"); progress_bar=container.querySelector(".huge_it_video_player_duration_slide"); progress_played_bar=container.querySelector(".played"); progress_thumb=container.querySelector(".thumb"); progress_buffered=container.querySelector(".buffered"); hover_timer_box=container.querySelector(".hover_timer"); hover_timer=container.querySelector(".hover_timer_time"); thumb_box=container.querySelector(".thumbnail_block"); thumb=container.querySelector(".thumbnail_block img"); /* *** */ /* FUNCTIONS */ function timeupdate(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } var curmins = Math.floor(video.currentTime / 60); var cursecs = Math.floor(video.currentTime - curmins * 60); var durmins = Math.floor(video.duration / 60); var dursecs = Math.floor(video.duration - durmins * 60); if(cursecs < 10){ cursecs = "0"+cursecs; } if(dursecs < 10){ dursecs = "0"+dursecs; } if(curmins < 10){ curmins = "0"+curmins; } if(durmins < 10){ durmins = "0"+durmins; } current_time_text.innerHTML = curmins+":"+cursecs; duration_time_text.innerHTML = durmins+":"+dursecs; var current_time_percent = current_time*(100/duration_time); var progress_bar_pixels=(current_time_percent*video_width)/100; progress_played_bar.style.width=progress_bar_pixels+"px"; if(progress_bar_pixels+progress_thumb.offsetWidth/2 > video_width){ var last_px = video_width-progress_thumb.offsetWidth/2; progress_thumb.style.left=last_px+"px"; }else if(progress_bar_pixels < progress_thumb.offsetWidth/2){ var first_px = progress_thumb.offsetWidth/2; progress_thumb.style.left=first_px+"px"; }else{ progress_thumb.style.left=progress_bar_pixels+"px"; } } function progressHandler(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } if(!video.paused){ play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; } if(thumb_box.style.display=="block" && !video.paused){ thumb_box.style.display="none"; } if(video.buffered.length > 0){ var i=video.buffered.length; var buffered_end=video.buffered.end(i-1); var loaded_percent=(buffered_end/duration_time)*100; var progress_bar_pixels=(loaded_percent*video_width)/100; progress_buffered.style.width=progress_bar_pixels+"px"; } if(!isFullScreen() && hasClass("hide_controls",container)){ removeClass("hide_controls",container); } } function VideoClickPlayPause(){ if(video.paused){ /* PLAY THE VIDEO */ video.play(); paused=""; addClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; center_play_icon.style.webkitAnimationName="popup"; center_play_icon.style.display="block"; setTimeout(function(){ center_play_icon.removeAttribute("style"); },500); playlist_autoplay="true"; }else{ /* PAUSE THE VIDEO */ video.pause(); paused=1; removeClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-play"></i>'; center_pause_icon.style.webkitAnimationName="popup"; center_pause_icon.style.display="block"; setTimeout(function(){ center_pause_icon.removeAttribute("style"); },500); } } function PlayPause(){ if(hasClass("poster",container)){ video.play(); paused=""; thumb_box.style.display="none"; removeClass("poster",container); addClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; playlist_autoplay="true"; }else{ if(video.paused){ /* PLAY THE VIDEO */ video.play(); paused=""; addClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; }else{ /* PAUSE THE VIDEO */ video.pause(); paused=1; removeClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-play"></i>'; } } } function step_back(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } video.currentTime=current_time-15; } function step_forward(){ if(!isNaN(video.currentTime)){ current_time=Math.floor(video.currentTime); } if(!isNaN(video.duration)){ duration_time=Math.floor(video.duration); } video.currentTime=current_time+15; } function toggle_mute(){ if(video.muted){ video.muted=false; if(volume<0.7){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } var volume_handle_width=volume_handle.offsetWidth; var volume_current_pixels=volume*volume_handle_width; volume_before.style.width=volume_current_pixels+"px"; volume_current.style.left=volume_current_pixels+"px"; }else{ var volume_handle_width=volume_handle.offsetWidth; var volume_current_width=volume_before.offsetWidth; volume=volume_current_width/volume_handle_width; video.muted=true; mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; volume_before.style.width="0px"; volume_current.style.left="0px"; } } function exitHandler(){ if (isFullScreen()) console.log(""); // nothing else cFullScreen(); } function toggle_full_screen(){ if (isFullScreen()) cFullScreen(); else requestFullScreen(container || document.documentElement); } function isFullScreen(){ return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen; } function vidSeeking(e){ var x = e.clientX; var l=container.getBoundingClientRect().left; var pos = x-l; if(pos>=0 && pos<video_width){ progress_played_bar.style.width = pos+"px"; progress_thumb.style.left = pos+"px"; var current_percent=(pos/video_width)*100; var seekto=duration_time*(current_percent/100); video.currentTime=seekto; } } function requestFullScreen(element){ if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); else if (element.mozRequestFullScreen) element.mozRequestFullScreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen(); addClass("fullscreen",container); fullscreen_btn.innerHTML='<i class="hugeicons hugeicons-compress"></i>'; jQuery.when(requestFullScreen).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; },500); }); } function cFullScreen(){ if (document.exitFullscreen) document.exitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); removeClass("fullscreen",container); fullscreen_btn.innerHTML='<i class="hugeicons hugeicons-expand"></i>'; jQuery.when(cFullScreen).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; },500); }); } function setVolume(e){ var x = e.clientX; var l=volume_handle.getBoundingClientRect().left; var pos = x-l; if(pos>0 && pos<=volume_handle.offsetWidth){ volume_before.style.width=pos+"px"; volume_current.style.left=pos+"px"; var volume_handle_width=volume_handle.offsetWidth; var current_percent=(pos/volume_handle_width)*100; volume=current_percent/100; video.muted=false; video.volume=current_percent/100; if(current_percent<70){ if(current_percent==0){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; } }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } }else{ if(pos<=0){ video.muted=true; mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; volume_before.style.width="0px"; volume_current.style.left="0px"; } } } function waiting(){ center_wait_icon.style.display="block"; center_wait_icon.style.opacity="1"; } function notWaiting(){ center_wait_icon.style.display="none"; center_wait_icon.style.opacity="0"; } function videoEnd(){ play_btn.innerHTML ='<i class="hugeicons hugeicons-refresh"></i>'; if (isFullScreen()) cFullScreen(); next_track(); } function timerDisplay(e){ if(video.buffered.length > 0){ var x = e.clientX; var l=container.getBoundingClientRect().left; var w=hover_timer_box.offsetWidth; var pos = x-l; var mouse_pos_percent= (pos/video_width)*100; var mouse_pos_time=duration_time*(mouse_pos_percent/100); var curmins = Math.floor(mouse_pos_time / 60); var cursecs = Math.floor(mouse_pos_time - curmins * 60); if(cursecs < 10){ cursecs="0"+cursecs; } if(curmins < 10){ curmins="0"+curmins; } //hover_timer_box.style.webkitAnimationName="opacity"; hover_timer_box.style.opacity="1"; hover_timer_box.style.display = "block"; hover_timer_box.style.left = x-l-w/2+"px"; hover_timer.innerHTML = curmins+":"+cursecs; } } function timerNotDisplay(e){ hover_timer_box.style.display = "none"; } function keyFunctions(e){ switch(e.keyCode){ case 40: var curent_volume=video.volume; var curent_volume_percent=curent_volume*100; if(curent_volume_percent>0){ var new_volume_percent=curent_volume_percent-10; if(new_volume_percent<=0){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-off"></i>'; volume_before.style.width="0px"; volume_current.style.left="0px"; video.muted=true; volume=0; }else{ if(new_volume_percent<70){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } var new_volume=new_volume_percent/100; var volume_handle_width=volume_handle.offsetWidth; var new_position=new_volume*volume_handle_width; volume_before.style.width=new_position+"px"; volume_current.style.left=new_position+"px"; video.muted=false; video.volume=new_volume; volume=new_volume; } } e.preventDefault(); break; case 38: var curent_volume=video.volume; var curent_volume_percent=curent_volume*100; if(curent_volume_percent<100){ var new_volume_percent=curent_volume_percent+10; if(new_volume_percent>100){ new_volume_percent=100; } if(new_volume_percent<70){ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-down"></i>'; }else{ mute_btn.innerHTML='<i class="hugeicons hugeicons-volume-up"></i>'; } var new_volume=new_volume_percent/100; var volume_handle_width=volume_handle.offsetWidth; var new_position=new_volume*volume_handle_width; volume_before.style.width=new_position+"px"; volume_current.style.left=new_position+"px"; video.volume=new_volume; video.muted=false; volume=new_volume; } e.preventDefault(); break; case 39: step_forward(); e.preventDefault(); break; case 37: step_back(); e.preventDefault(); break; case 32: VideoClickPlayPause(); e.preventDefault(); break; } } function huge_it_single_video_responsive(){ var video_parent=container.parentNode; var video_parent_width=video_parent.offsetWidth; if(video_parent_width<=video_param_width && !isFullScreen()){ /*container.style.width="100%";*/ addClass("fullwidth",container); jQuery.when(huge_it_single_video_responsive).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; },500); }); }else{ removeClass("fullwidth",container); /*container.style.width=video_param_width+"px";*/ jQuery.when(huge_it_single_video_responsive).done(function(){ setTimeout(function(){ video_width=video.offsetWidth; },500); }); } } function videoResized(){ setTimeout(function(){ video_width=video.offsetWidth; },500); } /* *** */ /* ADD EVENT LISTENERS */ /* *** */ video.addEventListener("timeupdate",timeupdate,false); video.addEventListener("playing",progressHandler,false); video.addEventListener("loadeddata",progressHandler,false); video.addEventListener("canplaythrough",progressHandler,false); video.addEventListener("progress",progressHandler,false); video.addEventListener("waiting",waiting,false); video.addEventListener("canplay",notWaiting,false); video.addEventListener("ended",videoEnd,false); video.addEventListener("resize",videoResized,false); /* *** */ video.addEventListener("click",VideoClickPlayPause,false); video.addEventListener("dblclick",toggle_full_screen,false); center_play_icon.addEventListener("click",VideoClickPlayPause,false); center_pause_icon.addEventListener("click",VideoClickPlayPause,false); center_wait_icon.addEventListener("click",VideoClickPlayPause,false); thumb_box.addEventListener("click",PlayPause,false); play_btn.addEventListener("click",PlayPause,false); backward_btn.addEventListener("click",step_back,false); forward_btn.addEventListener("click",step_forward,false); mute_btn.addEventListener("click",toggle_mute,false); fullscreen_btn.addEventListener("click",toggle_full_screen,false); container.addEventListener('webkitfullscreenchange', exitHandler, false); container.addEventListener('mozfullscreenchange', exitHandler, false); container.addEventListener('fullscreenchange', exitHandler, false); container.addEventListener('MSFullscreenChange', exitHandler, false); progress_bar.addEventListener("mouseover",timerDisplay,false); progress_bar.addEventListener("mousemove",timerDisplay,false); progress_bar.addEventListener("mouseout",timerNotDisplay,false); /* KEYBOARD */ /* *** */ container.addEventListener("mouseover",function(){ window.addEventListener("keydown",keyFunctions,false); },false) container.addEventListener("mouseout",function(){ window.removeEventListener("keydown",keyFunctions,false); },false) /* *** */ /* VIDEO SEEKING */ progress_bar.addEventListener("mousedown",function(e){ dragging=1; vidSeeking(e); },false); window.addEventListener("mousemove",function(e){ if(dragging==1){ if(paused!=1){ video.pause(); } removeClass("playing",container); vidSeeking(e); } },false); window.addEventListener("mouseup",function(){ if(dragging==1){ if(paused!==1){ video.play(); } addClass("playing",container); dragging=""; } },false); /* VOLUME CHANGING */ volume_handle.addEventListener("mousedown",function(e){ volume_dragging=1; setVolume(e); },false); window.addEventListener("mousemove",function(e){ if(volume_dragging==1){ setVolume(e); } },false); window.addEventListener("mouseup",function(){ if(volume_dragging==1){ volume_dragging=""; } },false); /* *** */ /* *** */ /*video.setAttribute("src",src);*/ /*if(autoplay=="true"){ video.autoplay = true; addClass("playing",container); removeClass("poster",container); thumb_box.style.display="none"; play_btn.innerHTML='<i class="hugeicons hugeicons-pause"></i>'; playlist_autoplay=="true"; }else{ video.autoplay = false; removeClass("playing",container); play_btn.innerHTML='<i class="hugeicons hugeicons-play"></i>'; addClass("poster",container); thumb_box.style.display="block"; playlist_autoplay=="true"; }*/ var timeout; container.onmousemove = function(){ if(isFullScreen()){ removeClass("hide_controls",container); clearTimeout(timeout); timeout = setTimeout(function(){ addClass("hide_controls",container); },3000); } } /* *** */ } } function init_playlist_active_item(){ /* AS THE ATTRIBUTES OF DOM ELEMENTS CHANGE I REDECLARE THESE VARIABLE(MAYBE THERE IS A BETTER WAY ??hmm) */ /* youtube player container */ youtube=global_container.querySelector("#youtube_player_<?php echo $i; ?> "); jQ_youtube=jQuery("#youtube_player_<?php echo $i; ?> "); /* vimeo player container */ vimeo_js=global_container.querySelector("#vimeo_<?php echo $i; ?> "); jQ_vimeo=jQuery("#vimeo_<?php echo $i; ?> "); var active=playlist_container.querySelector("li.active") var id=active.getAttribute("data-item-id"); var type=active.getAttribute("data-type"); switch(type){ case "custom": /* HIDE YOUTUBE PLAYER */ youtube.style.display="none"; if(typeof youtube_player.loadVideoById === 'function'){ youtube_player.loadVideoById(""); } global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb").style.display="none"; /* HIDE VIMEO PLAYER */ vimeo_player.setAttribute("src",""); vimeo_js.style.display="none"; global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb").style.display="none"; /* DISPLAY CUSTOM VIDEO */ container.style.display="block"; var src=active.getAttribute("data-src"); var thumb=active.getAttribute("data-poster"); var title=active.getAttribute("data-title"); container.querySelector("video").setAttribute("src",src); container.querySelector(".video_title").innerHTML=title; if(playlist_autoplay=="true"){ container.querySelector("video").autoplay = true; addClass("playing",container); removeClass("poster",container); container.querySelector(".thumbnail_block").style.display="none"; container.querySelector(".play_pause").innerHTML='<i class="hugeicons hugeicons-pause"></i>'; playlist_autoplay="true"; }else{ container.querySelector("video").autoplay = false; removeClass("playing",container); container.querySelector(".play_pause").innerHTML='<i class="hugeicons hugeicons-play"></i>'; addClass("poster",container); container.querySelector(".thumbnail_block img").setAttribute("src",thumb); container.querySelector(".thumbnail_block").style.display="block"; } break; case "youtube": /* DISPLAY YOUTUBE PLAYER */ var id=active.getAttribute("data-video-id"); var thumb=active.getAttribute("data-poster"); youtube_player.loadVideoById(id); youtube.style.display="block"; if(playlist_autoplay=="true"){ youtube_player.playVideo(); global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb").style.display="none"; }else{ youtube_player.pauseVideo(); global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb img.thumb").setAttribute("src",thumb); global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb").style.display="block"; } /* HIDE VIMEO PLAYER */ vimeo_player.setAttribute("src",""); vimeo_js.style.display="none"; global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb").style.display="none"; /* HIDE CUSTOM VIDEO */ container.style.display="none"; container.querySelector("video").setAttribute("src",""); container.querySelector(".thumbnail_block").style.display="none"; break; case "vimeo": /* HIDE YOUTUBE PLAYER */ youtube.style.display="none"; youtube_player.loadVideoById(""); global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb").style.display="none"; /* DISPLAY VIMEO PLAYER */ var id=active.getAttribute("data-video-id"); var thumb=active.getAttribute("data-poster"); var vimeo_autoplay; if(playlist_autoplay=="true"){ vimeo_autoplay="&autoplay=1"; global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb").style.display="none"; }else{ vimeo_autoplay=""; global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb img.thumb").setAttribute("src",thumb); global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb").style.display="block"; } vimeo_player.setAttribute("src","https://player.vimeo.com/video/"+id+"?api=1&color=<?php echo $paramssld['video_pl_vimeo_color']; ?> &player_id=vimeo_<?php echo $i; ?> &fullscreen=0"+vimeo_autoplay); vimeo_js.style.display="block"; /* HIDE CUSTOM VIDEO */ container.style.display="none"; container.querySelector("video").setAttribute("src",""); container.querySelector(".thumbnail_block").style.display="none"; break; } } function next_track(){ var active=jQ_items.parent().find("li.active"); var active_id=active.data("item-id"); var max_id=jQ_items.length-1; var next; if(active_id!=max_id){ next=active_id+1; }else{ next=0; } active.removeClass("active"); jQ_items.eq(next).addClass("active"); init_playlist_active_item(); } function change_track(el){ var active=el.parent().find("li.active"); var active_id=active.data("item-id"); var this_id=el.data("item-id"); var max_id=jQ_items.length-1; if(this_id!=active_id){ active.removeClass("active"); el.addClass("active"); jQuery.when(change_track).done(function(){ setTimeout(function(){ init_playlist_active_item(); },100); }); } } function huge_it_playlist_responsive(){ var computedStyle = getComputedStyle(global_container.parentNode); var a=global_container.parentNode.clientWidth-parseFloat(computedStyle.paddingRight)-parseFloat(computedStyle.paddingLeft); if(player_width>=a){ addClass("fullwidth",global_container); jQuery.when(change_track).done(function(){ setTimeout(function(){ var player_width=global_container.offsetWidth; var player_aprox_height=player_width*0.56; youtube.style.height=player_aprox_height+"px"; vimeo_js.style.height=player_aprox_height+"px"; },100); }); }else{ removeClass("fullwidth",global_container); youtube.style.height=video_param_aprox_height+"px"; vimeo_js.style.height=video_param_aprox_height+"px"; } } function removeVimeoThumb(){ var active=playlist_container.querySelector("li.active"); var type=active.getAttribute("data-type"); if(type=="vimeo"){ var id=active.getAttribute("data-video-id"); global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb").style.display="none"; vimeo_player.setAttribute("src","https://player.vimeo.com/video/"+id+"?api=1&color=<?php echo $paramssld['video_pl_vimeo_color']; ?> &portrait=<?php echo $paramssld['video_pl_vimeo_portrait']; ?> &player_id=vimeo_<?php echo $i; ?> &fullscreen=0&autoplay=1"); playlist_autoplay="true"; } } function removeYoutubeThumb(){ var active=playlist_container.querySelector("li.active"); var type=active.getAttribute("data-type"); if(type=="youtube"){ var id=active.getAttribute("data-video-id"); global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb").style.display="none"; youtube_player.loadVideoById(id); youtube_player.playVideo(); playlist_autoplay="true"; } } /* ADD EVENT LISTENERS */ init_playlist_custom_video(); jQuery.when(onYouTubeIframeAPIReady).done(function(){ setTimeout(function(){ load_icon.style.display="none"; removeClass("loading",global_container); init_playlist_active_item(); },2000); }); huge_it_playlist_responsive(); jQuery(window).on("resize",function(){ huge_it_playlist_responsive(); }); jQ_items.on("click",function(){ change_track(jQuery(this)); }); global_container.querySelector(".players_wrapper #youtube_<?php echo $i; ?> _thumb").addEventListener("click",removeYoutubeThumb,false); global_container.querySelector(".players_wrapper #vimeo_<?php echo $i; ?> _thumb").addEventListener("click",removeVimeoThumb,false); }); } /* *** */ } } }); </script> <style> /* parameters */ #huge_it_album_video_player_<?php echo $i; ?> { width:<?php echo $video_player[0]->width; ?> px; height:auto; <?php switch ($paramssld['video_pl_position']) { case "left": ?> float:left; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; <?php break; case "right": ?> float:right; margin-right:<?php echo $paramssld['video_pl_margin_right']; ?> px; margin-left:<?php echo $paramssld['video_pl_margin_left']; ?> px; <?php break; case "center": ?> margin:0px auto; <?php break; } ?> margin-top:<?php echo $paramssld['video_pl_margin_top']; ?> px; margin-bottom:<?php echo $paramssld['video_pl_margin_bottom']; ?> px; background:#<?php echo $paramssld['video_pl_background_color']; ?> ; border:<?php echo $paramssld['video_pl_border_size']; ?> px solid #<?php echo $paramssld['video_pl_border_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper { <?php switch ($video_player[0]->layout) { case "left": ?> float:right; <?php break; case "right": ?> float:left; <?php break; case "bottom": ?> float:left; <?php break; } ?> } #huge_it_album_video_player_<?php echo $i; ?> , #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .custom_thumb, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .thumbnail_block { background:#f1f1f1; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player { position:relative; float:left; display:block; width:100%; height:100%; margin:0px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper > iframe { height:<?php echo $video_player[0]->width * (3 / 5) * 0.5600000000000001; ?> px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper { width:<?php echo $video_player[0]->width * (3 / 5); ?> px; } #huge_it_album_video_player_<?php echo $i; ?> .align_bottom .players_wrapper { width:<?php echo $video_player[0]->width; ?> px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .thumbnail_block { background:#<?php echo $paramssld['video_pl_background_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom { background:rgba(<?php echo hex2RGB($paramssld['video_pl_controls_panel_color']); ?> ,<?php echo $paramssld['video_pl_controls_panel_opacity'] / 100; ?> ); } #huge_it_album_video_player_<?php echo $i; ?> .huge_it_player .thumbnail_block .thumbnail_play, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_center, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_controls .control { color:#<?php echo $paramssld['video_pl_buttons_color']; ?> !important; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_controls .control:hover { color:#<?php echo $paramssld['video_pl_buttons_hover_color']; ?> !important; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_duration_slide { background:transparent; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration { background:rgba(<?php echo hex2RGB($paramssld['video_pl_timeline_background']); ?> ,<?php echo $paramssld['video_pl_timeline_background_opacity'] / 100; ?> ); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { background:rgba(<?php echo hex2RGB($paramssld['video_pl_timeline_buffering_color']); ?> ,<?php echo $paramssld['video_pl_timeline_buffering_opacity'] / 100; ?> ); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_before, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played{ background:#<?php echo $paramssld['video_pl_timeline_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { background:#<?php echo $paramssld['video_pl_timeline_slider_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_controls .timer .current_time { color:#<?php echo $paramssld['video_pl_curtime_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_controls .timer .separator, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_video_player_bottom .huge_it_video_player_controls .timer .duration_time { color:#<?php echo $paramssld['video_pl_durtime_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper, #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul { background:#<?php echo $paramssld['video_pl_playlist_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper h3 { color:#<?php echo $paramssld['video_pl_playlist_head_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item:hover { background:#<?php echo $paramssld['video_pl_playlist_hover_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item.active { background:#<?php echo $paramssld['video_pl_playlist_active_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item .playlist_button .item_title { color:#<?php echo $paramssld['video_pl_playlist_text_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item:hover .playlist_button .item_title { color:#<?php echo $paramssld['video_pl_playlist_hover_text_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item.active .playlist_button .item_title { color:#<?php echo $paramssld['video_pl_playlist_active_text_color']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar-thumb { border-left-color: #<?php echo $paramssld['video_pl_playlist_scroll_thumb']; ?> ; background: #<?php echo $paramssld['video_pl_playlist_scroll_thumb']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar-track { border-left-color: #<?php echo $paramssld['video_pl_playlist_scroll_track']; ?> ; background: #<?php echo $paramssld['video_pl_playlist_scroll_track']; ?> ; -webkit-box-shadow: inset 0 0 1px #<?php echo $paramssld['video_pl_playlist_scroll_track']; ?> ; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar-thumb:hover { border-left-color: #<?php echo $paramssld['video_pl_playlist_scroll_thumb_hover']; ?> ; background: #<?php echo $paramssld['video_pl_playlist_scroll_thumb_hover']; ?> ; } /* static */ #huge_it_album_video_player_<?php echo $i; ?> { position:relative; display:table; height:auto; min-width:350px; font-size:15px; font-weight:normal; font-family:Roboto, Arial, Helvetica, sans-serif; font-style:normal; line-height:1; user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none; transition:width .3s linear,height .3s linear; box-sizing:content-box; } #huge_it_album_video_player_<?php echo $i; ?> .fullwidth { width:100%; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper { position:relative; display:table; height:auto; } #huge_it_album_video_player_<?php echo $i; ?> .fullwidth .players_wrapper { width:100%; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player { position:relative; display:table; height:auto; min-width:350px; font-size:15px; font-weight:normal; font-family:Roboto, Arial, Helvetica, sans-serif; font-style:normal; line-height:1; user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none; transition:width .3s linear,height .3s linear; } #huge_it_album_video_player_<?php echo $i; ?> .loading { overflow:hidden; } #huge_it_album_video_player_<?php echo $i; ?> .load_icon { position:absolute; display:block; width:100%; height:100%; background:#fff; z-index:15; } #huge_it_album_video_player_<?php echo $i; ?> .load_icon img { width:50px; position:absolute; top:50%; left:50%; margin-left:-40px; margin-top:30px; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_player, #huge_it_album_video_player_<?php echo $i; ?> .playlist_player iframe { position:relative; display:block; width:100%; height:auto; margin:0px; z-index:5; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.poster { overflow:hidden; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullwidth { width:100%; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen { width:100%; transition:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen video { width:100%; max-height:100%; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player div[data-title]:hover:after { content: attr(data-title); padding:8px 10px; color: #fff; position: absolute; left:0; bottom: calc(100% + 20px); bottom: -webkit-calc(100% + 20px); bottom: -moz-calc(100% + 20px); bottom: -ms-calc(100% + 20px); bottom: -o-calc(100% + 20px); white-space: nowrap; z-index:6; font-size:12px; background:#444; border-radius:2px; line-height:1; -moz-transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_player { position:relative; float:left; display:block; width:100%; height:100%; margin:0px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_player video { position:relative; float:left; display:block; width:100%; height:auto; margin:0px; z-index:5; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .thumbnail_block { position:absolute; display:none; left:0px; top:0px; width:100%; height:100%; overflow:hidden; z-index:10; text-align:center; vertical-align:middle; white-space:nowrap; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.poster .thumbnail_block { display:block; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .thumbnail_block img { position:absolute; left:0px; top:0px; display:block; width:100%; max-height:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .thumbnail_block .thumbnail_play { position:absolute; display:block; left:50%; top:50%; margin:-30px 0px 0px -30px; width:60px; height:60px; font-size:58px; line-height:60px; text-align:center; cursor:poiner; transition:transform .5s cubic-bezier(0.0,0.0,0.2,1); cursor:pointer; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .thumbnail_block .thumbnail_play:hover { transform:scale(1.05,1.05); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_top { position: absolute; top: 0px; left: 0px; width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); width: -ms-calc(100% - 30px); padding: 15px; background:rgba(0,0,0,.1); cursor: pointer; overflow: hidden; z-index:11; webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_top, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.hide_controls.playing .huge_it_video_player_top { opacity:0; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing:not(.hide_controls):hover .huge_it_video_player_top { opacity:1; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_top .video_title { color: #fff; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom { position:absolute; display:block; bottom:0px; left:0px; height:50px; width:100%; z-index:6; webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom { height:80px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom { opacity:0; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.hide_controls.playing .huge_it_video_player_bottom { opacity:0; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing:not(.hide_controls):hover .huge_it_video_player_bottom { opacity:1; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_duration_slide { position:absolute; left:0px; bottom:30px; display:block; width:100%; height:20px; margin:0px; line-height:1; cursor:pointer; -moz-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide { height:30px; bottom:50px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration { position:absolute; display:block; bottom:7.5px; left:0px; width:100%; height:5px; z-index:6; -moz-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration { bottom:11px; height:8px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played { position:absolute; display:block; bottom:7.5px; left:0px; width:0px; height:5px; z-index:8; -moz-transition:height .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:height .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:height .1s cubic-bezier(0.0,0.0,0.2,1); transition:height .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played { bottom:11px; height:8px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { position:absolute; display:block; bottom:3.5px; left:0px; width:13px; height:13px; margin-left:-6.5px; background:#f12b24; border-radius:6.5px; z-index:9; cursor:pointer; -moz-transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); transition:transform .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { bottom:5px; width:20px; height:20px; border-radius:10px; margin-left:-10px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .thumb { transform:scale(0,0); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .thumb { transform:scale(1,1); } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { position:absolute; display:block; bottom:7.5px; left:0px; width:0px; height:5px; z-index:7; -moz-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); -ms-transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transition:all .1s cubic-bezier(0.0,0.0,0.2,1); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { bottom:11px; height:8px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { bottom:8.5px; height:3px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .duration, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .played, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide .buffered { bottom:12.5px; height:5px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .duration, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .played, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .buffered { bottom:7.5px; height:5px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .duration, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .played, #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.playing.fullscreen .huge_it_video_player_bottom .huge_it_video_player_duration_slide:hover .buffered { bottom:11px; height:8px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_duration_slide .hover_timer { position: absolute; display:none; left:0; bottom:100%; padding: 5px 9px; max-width: 200px; background:rgba(28,28,28,0.8); border-radius:2px; white-space: nowrap; word-wrap: normal; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size:11px; line-height:1; color: #fff; z-index:6; -moz-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; -moz-transition:opacity .1s cubic-bezier(0.4,0.0,1,1); -webkit-transition:opacity .1s cubic-bezier(0.4,0.0,1,1); -ms-transition:opacity .1s cubic-bezier(0.4,0.0,1,1); transition:opacity .1s cubic-bezier(0.4,0.0,1,1); -webkit-animation-duration:.1s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: cubic-bezier(0.4,0.0,1,1); opacity:0; } @-webkit-keyframes opacity { 0% { opacity:0; } 100% { opacity:1; } } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls { position:absolute; left:0px; bottom:0px; display:block; width:100%; height:30px; margin:0px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls { text-align:center; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls { height:50px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .control { position:relative; display:inline-block; width:30px; height:30px; margin:0px 0px 0px 5px; font-size:16px; line-height:30px; text-align:center; vertical-align:top; cursor:pointer; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .control { width:50px; height:50px; margin:0px 0px 0px 5px; font-size:30px; line-height:50px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .fast_back { } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls .fast_back { display:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .play_pause { } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls .play_pause { float:left; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .fast_forward { } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls .fast_forward { display:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .mute_button { } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls .mute_button { float:left; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.very_small .huge_it_video_player_bottom .huge_it_video_player_controls .mute_button { display:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { position:relative; display:inline-block; width:50px; height:30px; background: none; cursor: pointer; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { float:left; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.very_small .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { display:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle { position:relative; display:inline-block; width:100px; height:50px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_before { position: absolute; top:13.5px; left:0px; height:3px; width:50px; z-index:7; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_before { top:22.5px; height:5px; width:100px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_current { position: absolute; top:8.5px; left:50px; height:13px; width: 4px; margin-left:-2px; background: #fff; z-index:8; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_current { top:15px; height:20px; width:6px; margin-left:-3px; left:100px; width: 4px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_after { position: absolute; top:13.5px; left:0px; height:3px; width:50px; background:#fff; z-index:6; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .volume_handle .volume_after { top:22.5px; height:5px; width:100px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .timer { position:relative; display:inline-block; min-width:50px; height:30px; margin:0px 0px 0px 5px; vertical-align:top; font-size:11px; line-height:30px; font-style:normal; font-weight:normal; text-align:center; cursor:pointer; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.fullscreen .huge_it_video_player_bottom .huge_it_video_player_controls .timer { height:50px; font-size:14px; line-height:50px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .timer .current_time { display:inline-block; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .timer .separator { display:inline-block; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .timer .duration_time { display:inline-block; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_bottom .huge_it_video_player_controls .full_screen { float:right; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player.small .huge_it_video_player_bottom .huge_it_video_player_controls .full_screen { float:right; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_center { text-align:center; font-size:15px; line-height:40px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_center div { position:absolute; display:none; left:50%; top:50%; margin-top:-20px; height:40px; width:40px; margin-left:-20px; background: rgba(0,0,0,.2); border-radius: 100%; text-align:center; transition:all .5s linear; -webkit-animation-duration:.5s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: linear; z-index:6; opacity:0; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .huge_it_player .huge_it_video_player_center .center_wait { background:transparent; } @-webkit-keyframes popup { 0% { opacity:1; transform:scale(1,1); } 100% { opacity:0; transform:scale(3,3); } } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper { float:left; display:block; width:<?php echo $video_player[0]->width * (2 / 5); ?> px; height:100%; margin:0px; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper h3 { position: relative; float: left; display: block; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: -moz-calc(100% - 20px); height: 30px; font-size: 18px; font-style: normal; text-shadow: none; margin: 0px; padding: 10px; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul { position:absolute; display:block; width:<?php echo $video_player[0]->width * (2 / 5); ?> px; top:50px; height:calc(100% - 50px); height:-webkit-calc(100% - 50px); height:-moz-calc(100% - 50px); height:-o-calc(100% - 50px); height:-ms-calc(100% - 50px); margin:0px; padding:0px; list-style-type:none; transition:all .3s linear; overflow:auto; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar-track { } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar { width: 10px; height: 9px; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar-thumb { } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul::-webkit-scrollbar-thumb:hover { } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item { position:relative; float:left; display:block; width:100%; margin:0px; padding:0px; overflow:hidden; list-style-type:none; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item .playlist_button { position:relative; float:left; display:block; width:calc(100% - 20px); width:-webkit-calc(100% - 20px); width:-moz-calc(100% - 20px); width:-o-calc(100% - 20px); width:-ms-calc(100% - 20px); padding:10px; cursor:pointer; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item .playlist_button .thumb { position:relative; float:left; display:block; width:72px; height:54px; overflow:hidden; text-align: center; vertical-align: middle; white-space: nowrap; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item .playlist_button .thumb:before { content:''; display:inline-block; height:100%; vertical-align:middle; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item .playlist_button img { display: inline-block; vertical-align: middle; width: auto; height: auto; max-width: 100%; } #huge_it_album_video_player_<?php echo $i; ?> .playlist_wrapper ul li.item .playlist_button .item_title { position: relative; display: block; float:right; width: calc(100% - 72px); height:54px; font-size:13px; vertical-align:middle; line-height:54px; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; text-indent: 15px; cursor: pointer; overflow: hidden; } #huge_it_album_video_player_<?php echo $i; ?> .fullwidth .playlist_wrapper { width:100%; } #huge_it_album_video_player_<?php echo $i; ?> .fullwidth .playlist_wrapper ul { position:relative; top:0px; width:100%; height:300px; margin:0px; } #huge_it_album_video_player_<?php echo $i; ?> .align_bottom .playlist_wrapper { width:100%; } #huge_it_album_video_player_<?php echo $i; ?> .align_bottom .playlist_wrapper ul { position:relative; top:0px; width:100%; height:300px; margin:0px; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .custom_thumb { position: absolute; display: none; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 10; text-align: center; vertical-align: middle; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .custom_thumb img.thumb { display:block; position:absolute; top:0px; left:0px; width:100%; max-height:none; } #huge_it_album_video_player_<?php echo $i; ?> .players_wrapper .custom_thumb img.play { position:absolute; top:calc(50% - 24.5px); top:-webkit-calc(50% - 24.5px); top:-moz-calc(50% - 24.5px); top:-o-calc(50% - 24.5px); top:-ms-calc(50% - 24.5px); left:calc(50% - 35px); left:-webkit-calc(50% - 35px); left:-moz-calc(50% - 35px); left:-o-calc(50% - 35px); left:-ms-calc(50% - 35px); width:70px; height:49px; cursor: pointer; } </style> <div id="huge_it_album_video_player_<?php echo $i; ?> " class="loading <?php if ($video_player[0]->layout == "bottom") { echo "align_bottom"; } ?> "> <div class="load_icon"> <img src="<?php echo plugins_url('video-player/images/loading.gif'); ?> " alt="loading" /> </div> <div class="players_wrapper"> <div class="huge_it_player playlist_player"> <div class="huge_it_video_player_player"> <video src="" data-current="--" data-duration="--"> Your browser does not support HTML5 video. </video> </div> <div class="thumbnail_block"> <img src="https://dailypost.files.wordpress.com/2013/08/img_8488.jpg" alt="poster" /> <div class="thumbnail_play"><i class="hugeicons hugeicons-play-circle-o"></i></div> </div> <div class="huge_it_video_player_top"> <div class="video_title">Big Buck Bunny</div> </div> <div class="huge_it_video_player_bottom"> <div class="huge_it_video_player_duration_slide"> <div class="duration"></div> <div class="played"></div> <div class="thumb"></div> <div class="buffered"></div> <div class="hover_timer"> <span class="hover_timer_time">00:00</span> </div> </div> <div class="huge_it_video_player_controls"> <div class="fast_back control" data-title="Fast backward"><i class="hugeicons hugeicons-step-backward"></i></div> <div class="play_pause control" data-title="Play"><i class="hugeicons hugeicons-play"></i></div> <div class="fast_forward control" data-title="Fast forward"><i class="hugeicons hugeicons-step-forward"></i></div> <div class="mute_button control" data-title="Mute"><i class="hugeicons hugeicons-volume-up"></i></div> <div class="volume_handle"> <div class="volume_before"></div> <div class="volume_current"></div> <div class="volume_after"></div> </div> <div class="timer"> <div class="current_time">--</div> <div class="separator"> / </div> <div class="duration_time">--</div> </div> <div class="full_screen control" data-title="Full Screen"><i class="hugeicons hugeicons-expand"></i></div> </div> </div> <div class="huge_it_video_player_center"> <div class="center_play"><i class="hugeicons hugeicons-play"></i></div> <div class="center_pause"><i class="hugeicons hugeicons-pause"></i></div> <div class="center_wait"><i class="hugeicons hugeicons-spinner hugeicons-pulse"></i></div> </div> </div> <div id="youtube_<?php echo $i; ?> _thumb" class="custom_thumb"><img class="thumb" src="<?php echo $videos[0]->image_url; ?> " alt="" /><img class="play" src="<?php echo plugins_url('video-player/images/play.youtube.png'); ?> " alt="youtube play" /></div> <div id="youtube_player_<?php echo $i; ?> " class="playlist_player"></div> <div id="vimeo_<?php echo $i; ?> _thumb" class="custom_thumb"><img class="thumb" src="<?php echo $videos[0]->image_url; ?> " alt="" /><img class="play" src="<?php echo plugins_url('video-player/images/play.vimeo.png'); ?> " alt="vimeo play" /></div> <iframe id="vimeo_<?php echo $i; ?> " class="playlist_player" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> <div class="playlist_wrapper"> <h3><?php echo $video_player[0]->name; ?> </h3> <ul> <?php $j = 0; foreach ($videos as $video) { switch ($video->sl_type) { case "video": ?> <li class="item <?php if ($j == 0) { echo "active"; } ?> " data-item-id="<?php echo $j; ?> " data-type="custom" data-src="<?php echo $video->video_url_1; ?> " data-poster="<?php echo $video->image_url; ?> " data-title="<?php echo $video->name; ?> "> <div class="playlist_button"> <div class="thumb"> <img src="<?php echo $video->image_url; ?> " alt="<?php echo $video->name; ?> " /> </div> <span class="item_title"><?php echo $video->name; ?> </span> </div> </li> <?php break; case "youtube": ?> <li class="item <?php if ($j == 0) { echo "active"; } ?> " data-item-id="<?php echo $j; ?> " data-type="youtube" data-video-id="<?php echo get_youtube_thumb_id_from_url($video->video_url_1); ?> " data-poster="<?php echo $video->image_url; ?> " data-title="<?php echo $video->name; ?> "> <div class="playlist_button"> <div class="thumb"> <img src="<?php echo $video->image_url; ?> " alt="<?php echo $video->name; ?> " /> </div> <span class="item_title"><?php echo $video->name; ?> </span> </div> </li> <?php break; case "vimeo": $vid = $video->video_url_1; $vid = explode("/", $vid); $vidid = end($vid); if ($j == 0) { $autoplay = $video_player[0]->autoplay; } else { $autoplay = 0; } $vidurl = "https://player.vimeo.com/video/" . $vidid . "?player_id=vimeo_player_" . $video->id . "&color=" . $paramssld['video_pl_vimeo_color'] . "&autoplay=" . $autoplay; ?> <li class="item <?php if ($j == 0) { echo "active"; } ?> " data-item-id="<?php echo $j; ?> " data-type="vimeo" data-video-id="<?php echo $vidid; ?> " data-poster="<?php echo $video->image_url; ?> "> <div class="playlist_button"> <div class="thumb"> <img src="<?php echo $video->image_url; ?> " alt="<?php echo $video->name; ?> " /> </div> <span class="item_title"><?php echo $video->name; ?> </span> </div> </li> <?php break; } $j++; } ?> </ul> </div> </div> <?php break; } return ob_get_clean(); }
function video_player_youtube($id) { global $wpdb; if (isset($_POST["show_video_url_1"]) or isset($_POST["show_video_url_2"])) { if ($_POST["show_video_url_1"] != '' or $_POST["show_video_url_2"] != '') { $table_name = $wpdb->prefix . "huge_it_videos"; $query = $wpdb->prepare("SELECT * FROM " . $wpdb->prefix . "huge_it_video_players WHERE id= %d", $id); $row = $wpdb->get_row($query); $query = $wpdb->prepare("SELECT * FROM " . $wpdb->prefix . "huge_it_videos where video_player_id = %s ", $row->id); $rowplusorder = $wpdb->get_results($query); foreach ($rowplusorder as $key => $rowplusorders) { if ($rowplusorders->ordering == 0) { $rowplusorderspl = 1; $wpdb->query($wpdb->prepare("UPDATE " . $wpdb->prefix . "huge_it_videos SET ordering = '" . $rowplusorderspl . "' WHERE id = %s ", $rowplusorders->id)); } else { $rowplusorderspl = $rowplusorders->ordering + 1; $wpdb->query($wpdb->prepare("UPDATE " . $wpdb->prefix . "huge_it_videos SET ordering = '" . $rowplusorderspl . "' WHERE id = %s ", $rowplusorders->id)); } } $video_thumb_url = get_youtube_thumb_id_from_url($_POST["show_video_url_1"]); $sql_video = "INSERT INTO \n`" . $table_name . "` ( `name`, `video_player_id`, `video_url_1`, `image_url`, `video_url_2`, `sl_type`, `video_width`, `ordering`, `published`) VALUES \n( '" . $_POST["show_title"] . "', '" . $id . "', '" . $_POST["show_video_url_1"] . "', 'http://img.youtube.com/vi/" . $video_thumb_url . "/mqdefault.jpg', '', 'youtube', '360', '0', '1' )"; $wpdb->query($sql_video); } } Html_video_player_youtube(); }