0

I have a video tag.

<video id="video1" poster="{{video.poster}}" ng-click="video.playIt()" controls>
    <source src="source.mp4" type="video/mp4">
</video>

I want to be able to click my video's poster or the controls to start the video. Then be able to pause and play the video by the video's controls or clicking anywhere inside the video element.

Here is my app.js...

$scope.video.playIt = function() {
  if (jQuery("#video1").get(0).paused) {jQuery("#video1").get(0).play();}
  else {jQuery("#video1").get(0).pause();}
}

At the moment I can start the video by clicking on the poster, and pause / play it by clicking on the video's element. However the controls do not work.

I think there may be a conflict with ng-click. I have added one but I think the video may have one already attached which is why there is a conflict.

Any help would be appreciated.

Thanks

Warren
  • 146
  • 2
  • 7
  • If you're using Ionic Framework, you may want to read this: https://github.com/driftyco/ionic/issues/1607 – rbarriuso Jul 14 '14 at 12:15
  • Otherwise I would say that the default implementation of the player usually plays / pauses the video when clicking on the poster, so you don't really need to attach a `ng-click` handler. – rbarriuso Jul 14 '14 at 12:16
  • Alternatively you could use a library like http://www.videogular.com – rbarriuso Jul 14 '14 at 12:18
  • @Warren get your solution here http://jsfiddle.net/kmturley/mgosw7kx/4/ – lazyCoder Apr 26 '17 at 10:02

0 Answers0