Question

查看计数器遇到了一些麻烦。我正在使用CakePHP和PostgreSQL，我们在这里

<div class="video-slider">
    <img
        src="/app/webroot/files/white_post.jpg"
        alt="altMessage"
        class="post-image"
        width=770
        height=432>
        <div class="video-container">
            <video width=770 height=432 controls id=videoPlayer></video>
        </div>
    <div class="vertical-btn-container">
            <div id="1" class="button" data-file="/path/to/files/video1.mp4" >
                <img
                    src="/app/webroot/files/introduction.png"
                    alt="intro"
                    class="cover-image">
                <p id="btn-text">btn text</p>
            </div>
            <div id="2" class="button" data-file="/path/to/files/video2.mp4">
                <img
                    src="/app/webroot/files/enviromental_settings.png"
                    alt="settings"
                    class="cover-image">
                <p id="btn-text">btn text</p>
            </div>
            <div id="3" class="button" data-file="/path/to/files/video3.mp4">
                <img
                    src="/app/webroot/files/comparative_report.png"
                    alt="comparative"
                    class="cover-image">
                <p id="btn-text">btn text</p>
            </div>
            <div id="4" class="button" data-file="/path/to/files/video3.mp4">
                <img
                    src="/app/webroot/files/technical_requirements.png"
                    alt="technical"
                    class="cover-image">
                <p id="btn-text">btn text</p>
            </div>
            <div id="5" class="button" data-file="/path/to/files/video5.mp4">
                <img
                    src="/app/webroot/files/clinical_report_part1.png"
                    alt="clinical1"
                    class="cover-image">
                <p id="btn-text">btn text</p>
            </div>
            <div id="6" class="button" data-file="/path/to/files/video6.mp4">
                <img
                    src="/app/webroot/files/clinical_report_part2.png"
                    alt="calinical2"
                    class="cover-image">
                <p id="btn-text">btn text</p>
            </div>
            <div id="7" class="button" data-file="/path/to/files/video7.mp4">
                <img
                    src="/app/webroot/files/child_attentional_age_report.png"
                    alt="children"
                    class="cover-image">
                <p  id="btn-text">btn text</p>
            </div>
        </div>
    </div>
 <!-- End of sub menu -->


<script type="text/javascript">
    $('.video-container').hide();
    var b = $('.button');
    for(i = 0; i<b.length; i++) {
        b[i].addEventListener('click',swapVideo,true);
    }
        function swapVideo(e) {
            var id = this.id;
            console.log();

            var par = $(e.target).parent();
            if(par[0].childElementCount > 2) {
                par = $(this);
                $('#videoPlayer')[0].src = e.target.getAttribute('data-file');
            } else {
                $('#videoPlayer')[0].src = par[0].attributes[2].nodeValue;
            }
            b.removeClass('playing'); //canceling gray color
            par.addClass('playing'); //draw clicked button to gray color
            $('#videoPlayer')[0].play();
            $('.post-image').hide();
            $('.video-container').show();
        }

</script>

这是一个模板index.ctp

function index($id=null) {
    $this->layout = 'app_ui_listview';
    $counter = $this->EntityCounter->find('list', array('fields' => array('EntityCounter.id', 'EntityCounter.value')));
    CakeLog::write('debug',print_r($counter,1));
    $this->set('counter', $counter);
}

这是控制器，与表“entity_counters”达成了一些协议。

我应该按任何按钮在我的播放器中切换视频，并根据其ID增加基数值，但我几乎不知道。

Answer 1

在周末努力工作后，我终于找到了解决方案。首先，我们应该在控制器中为值实现创建一个新函数。

function pushValue() {
    $id = $_POST['pushValue'];
    $this->EntityCounter->updateAll(array('EntityCounter.value' => 'EntityCounter.value+1'), array('EntityCounter.id' => $id));
    $this->_stop();

然后添加AJAX结构，以防止我们每次单击按钮时重新加载页面。

function swapVideo(e) {
        **$.ajax({
            type:"POST",
            url:"<?php echo $this->webroot;?>trainingCenter/pushValue",
            data:{pushValue:this.id}
        });**
        var par = $(e.target).parent();
        if(par[0].childElementCount > 2) {
            par = $(this);
            $('#videoPlayer')[0].src = e.target.getAttribute('data-file');
        } else {
            $('#videoPlayer')[0].src = par[0].attributes[2].nodeValue;
        }
        b.removeClass('playing');// canceling gray color
        par.addClass('playing');// draw clicked button to gray color
        $('#videoPlayer')[0].play();
        $('.post-image').hide();
        $('.video-container').show();
    }

.Profit。

P.S。：关于ajax和cakephp的一个重要事项......我们需要允许它们一起工作，所以：

function beforeFilter() {
     parent::beforeFilter();
     $this->Security->unlockedActions = array('pushValue');
}

毕竟我们的＆＃34;索引＆＃34;功能看起来像那样：

function index() {
    $this->layout = 'app_ui_listview';
}

多数民众赞成。希望它会有所帮助。 TNX。

HTML5视频观看计数器

1 个答案: