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視頻瀏覽量計數器

回答

相關問題