HTML5 Video-Ansichten Zähler

Question

Bekam einige Probleme mit Ansichten Zähler. I`m mit CakePHP und PostgreSQL und hier gehen wir

<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> 

dieses eine Schablone ist 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); 
} 

Dieser Controller ist, , die einige Deal mit Tisch "entity_counters" bekam.

Ich sollte eine beliebige Taste drücken, die Video in meinem Player schaltet, und Wert in der Basis entsprechend seiner ID erhöhen, aber ich habe kaum eine Idee.

Answer 1

Nach fleißigen Wochenenden fand ich endlich eine Lösung. Zuerst sollten wir eine neue Funktion im Controller für die Implementierung von Werten erstellen.

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

---

Dann AJAX sructure hinzufügen, unsere Seite zu verhindern, dass jedes Mal neu zu laden wir auf eine Schaltfläche klicken.

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.

PS: Eine wichtige Sache über Ajax und cakephp ... wir brauchen sie zusammen, damit arbeiten, so:

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

Nachdem alle "index" Funktion wie das aussehen kann:

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

Das ist es. Hoffe, es wird dir helfen. Tnx.