javascript - HTML5 视频观看次数计数器

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);
} 

这是 Controller ，与表“entity_counters”达成了一些协议(protocol)。

我应该按下播放器中切换视频的任何按钮，并根据其 id 增加 base 中的值，但我几乎没有任何想法。

Answer 1

经过周末的努力工作，我终于找到了解决方案。首先，我们应该在 Controller 中创建一个新函数来实现值。

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();
    }

.利润。

P.S.:关于 ajax 和 cakephp 的一件重要事情......我们需要让它们一起工作，所以:

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

毕竟我们的“索引”函数看起来像这样:

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

就是这样。希望它会有所帮助。谢谢。