HTML5视频浏览量计数器

浏览量计数器遇到一些麻烦。我真的使用CakePHP和PostgreSQL在这里，我们去HTML5视频浏览量计数器

<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增加基地的值，但我几乎没有任何想法。

来源

2016-08-19 Nkmelnikov

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

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

然后添加AJAX sructure，以防止我们的页面从重装我们点击一个按钮，每一次。

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

。盈利。

PS：关于Ajax和CakePHP一个重要的事情......我们需要让他们一起工作，所以：

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

毕竟我们的“索引”功能，可以看起来像：

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

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

来源

2016-08-22 08:20:14 Nkmelnikov

HTML5视频浏览量计数器

回答

相关问题