PHP:修改插件输出视频到文本以使其全屏

时间:2014-11-09 07:00:51

标签: javascript php css wordpress

我正在修改一个PHP Wordpress插件(Ebor模板构建器,构建在aqua页面构建器上)。

  • 其中一个模块输出一个文本框,另一个模块输出一个背景视频。
  • 使用背景视频时,模块使用JS读取窗口大小并调整视频大小以完全覆盖它。它似乎是通过附加“fullheight”CSS类来做的。
  • 我没有使用后台视频功能,所以我正在尝试修改该插件,使输出文本框大小调整为屏幕大小(而不是视频)。
  • 欣赏任何输入......我试图让它工作,但我不太了解PHP :(

这是用于文本功能的PHP:     

    //set and create block
    function __construct() {
        $block_options = array(
            'name' => 'Text',
            'size' => 'span6',
            'block_icon' => '<i class="fa fa-font"></i>',
            'block_description' => 'Use to add Text,<br />HTML or shortcodes.'
        );

        //create the block
        parent::__construct('aq_ebor_text_block', $block_options);
    }

    function form($instance) {

        $defaults = array(
            'text' => '',
            'wpautop' => 0,
            'code_display' => 0,
            'textcenter' => 0
        );

        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
    ?>

        <p class="description">
            <label for="<?php echo $this->get_field_id('title') ?>">
                Title (optional)
                <?php echo aq_field_input('title', $block_id, $title, $size = 'full') ?>
            </label>
        </p>

        <p class="description">
            <label for="<?php echo $this->get_field_id('text') ?>">
                Content
                <?php echo aq_field_textarea('text', $block_id, $text, $size = 'full', true) ?>
            </label>
        </p>

        <p class="description">
            <label for="<?php echo $this->get_field_id('wpautop') ?>">
                Disable Auto Paragraphs? <code>wpautop</code><br/>
                <?php echo aq_field_checkbox('wpautop', $block_id, $wpautop) ?>
            </label>
        </p>

        <p class="description">
            <label for="<?php echo $this->get_field_id('textcenter') ?>">
                Center Text?
                <?php echo aq_field_checkbox('textcenter', $block_id, $textcenter) ?>
            </label>
        </p>

    <?php
    }// end form

    function block($instance) {
        extract($instance);

            if( !(isset( $textcenter )) )
                $textcenter = 0;

            if( $textcenter == 1 )
                echo '<div class="text-center">';

            if($title)
                echo '<h3 class="sub-heading">' . $title . '</h3>';

            if($wpautop){
                echo do_shortcode(htmlspecialchars_decode($text));
            } else {
                echo wpautop(do_shortcode(htmlspecialchars_decode($text)));
            }

            if( $textcenter == 1 )
                echo '</div>';

    }//end block

}//end class

这是用于后台视频功能的PHP(如您所见,它使用“fullheight”类):

<?php

class AQ_Background_Video_Block extends AQ_Block {

    //set and create block
    function __construct() {
        $block_options = array(
            'name' => 'Background Video',
            'size' => 'span12',
            'block_icon' => '<i class="icon-picons-font"></i>',
            'block_description' => 'Use to add Text<br />HTML or shortcodes.'
        );

        //create the block
        parent::__construct('aq_background_video_block', $block_options);
    }//end construct

    function form($instance) {

        /**
         * Get all revsliders and load into an array.
         */
        global $wpdb;
        $table_name = $wpdb->prefix . 'revslider_sliders';
        $sliders = $wpdb->get_results( "SELECT id, title, alias FROM $table_name" );
        $amount = count($sliders);
        $slider_choices = array('none' => 'None');
        if( is_array($sliders) ){
            for( $i = 0; $i < $amount; $i++ ){
                $slider_choices[$sliders[$i]->alias] = $sliders[$i]->title;
            }
        }

        /**
         * Build defaults and instance for this block.
         */
        $defaults = array(
            'text' => '',
            'slider' => 'none',
            'type' => 'vimeo',
            'image' => ''
        );
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);

        $video_types = array(
            'vimeo' => 'Vimeo',
            'youtube' => 'Youtube'
        );

        /**
         * Check if we found any sliders and display a select box or a message accordingly.
         */
        if( $sliders ) :
    ?>

        <p class="description">
            <label for="<?php echo $this->get_field_id('slider') ?>">
                Choose Revolution Slider to Display over the top of this video.<br/>
                <?php echo aq_field_select('slider', $block_id, $slider_choices, $slider) ?>
            </label>
        </p>

    <?php else : ?>

        <p class="description">Please Add Some Revolution Sliders if you wish to overlay content to this video.</p>

    <?php endif; ?>

        <p class="description">
            <label for="<?php echo $this->get_field_id('type') ?>">
                Video Source
                <?php echo aq_field_select('type', $block_id, $video_types, $type) ?>
            </label>
        </p>

        <p class="description">
            <label for="<?php echo $this->get_field_id('title') ?>">
                Video ID <code>e.g: 81676731 (Vimeo) or http://youtu.be/BsekcY04xvQ (Youtube)</code>
                <?php echo aq_field_input('title', $block_id, $title, $size = 'full') ?>
            </label>
        </p>

        <p class="description">
            <label for="<?php echo $this->get_field_id('image') ?>">
                Fallback Static Image <code>Mobile devices do not allow background video from a device level, choose a static background image instead.</code>
                <?php echo aq_field_upload('image', $block_id, $image, $media_type = 'image') ?>
            </label>
        </p>

    <?php   
    }// end form

    function block($instance) {
        extract($instance);

        if( $type == 'vimeo' ) :
            wp_enqueue_script( 'ebor-vimeo', get_template_directory_uri() . '/js/okvideo.js', array('jquery'), false, true  );
    ?>

            <div class="intro-bg fullheight">
                <div class="valign">

                    <?php 
                        if(!( 'none' == $slider ))
                            echo do_shortcode( '[rev_slider '. $slider .']' ); 
                    ?>

                </div>
            </div>

            <script type="text/javascript">
                jQuery(document).ready(function(){
                    if( !device.tablet() && !device.mobile() ) {
                        jQuery.okvideo({ 
                            source: '<?php echo $title; ?>',
                            autoplay:true,
                            loop: true,
                            highdef:true,
                            hd:true, 
                            adproof: true,
                            volume:0
                        });     
                    } else {
                        jQuery('body').addClass('poster-img');
                    }   
                });
            </script>

            <style type="text/css">
                .poster-img{
                    background-image: url(<?php echo $image; ?>) !important;
                    background-repeat: no-repeat !important;
                    background-position: center center !important;
                    background-size: cover !important;
                }
            </style>

    <?php       
        elseif( $type == 'youtube' ) :
            wp_enqueue_script( 'ebor-youtube', get_template_directory_uri() . '/js/youtube.js', array('jquery'), false, true  );
    ?>

            <div class="intro-bg fullheight">
                <div class="valign">

                    <?php echo do_shortcode( '[rev_slider '. $slider .']' ); ?>

                    <a id="bgndVideo" class="player mb_YTVPlayer" data-property="{videoURL:'<?php echo $title; ?>',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}" title="" style="display: none;"></a>

                </div>
            </div>

            <script type="text/javascript">
                jQuery(document).ready(function(){
                    if( !device.tablet() && !device.mobile() ) {        
                        jQuery(function(){
                          jQuery(".player").mb_YTPlayer();
                        });         
                    } else {
                        jQuery('body').addClass('poster-img');
                    }   
                });
            </script>

            <style type="text/css">
                .poster-img{
                    background-image: url(<?php echo $image; ?>) !important;
                    background-repeat: no-repeat !important;
                    background-position: center center !important;
                    background-size: cover !important;
                }
            </style>

    <?php
        endif;
    }//end block

}//end class

0 个答案:

没有答案