Question

注意：请提供严格的角度解决方案。没有jquery。默认视频控件不适用于我们的场景。

方案：单击播放按钮，然后加载并播放视频。除非单击按钮，否则不应预加载视频。

但是，无需点击按钮即可进行预加载和自动播放。我在小提琴中缺少什么？

HTML

<div ng-app ng-controller="videoCtrl">
 <video preload="preload" autoplay="autoplay">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4">
  </video>
  <button ng-click="playVideo($event)">PLAY</button>
</div>

角

function videoCtrl($scope) {
    $scope.autoplay = false;
  $scope.preload = "none";

  $scope.playVideo = function () {
    console.log("hello");
    $scope.autoplay = true;
    $scope.preload = "auto";
  }
}

CSS

div {
  position:relative;
  width:300px;
  height:150px;
}
button {
  position:absolute;
  top:50px;
  left:120px;

}

https://jsfiddle.net/nkarri/nd9utkbp/1/

先谢谢。

Answer 1

以下是几乎没有假设的解决方案：
JSFiddle With Solution
的 HTML

<body ng-app="videoApp"> <div ng-controller="videoCtrl"> <video id="videoID" preload="preload"> <source src="http://www.w3schools.com/html/mov_bbb.mp4"> </video> <button play-video > PLAY </button> </div> </body>

<强>的Javascript

var myapp = angular.module('videoApp', []); myapp.controller('videoCtrl', videoCtrl); function videoCtrl($scope) { $scope.hideplay=true; $scope.preload = "none"; } myapp.directive('playVideo', playVideo); function playVideo() { return { restrict: 'A', link: function(scope, element) { element.bind('click', function() { element.css('display','none'); var videoElements = angular.element(document.getElementById('videoID')); videoElements[0].play(); }); } } }

<强> CSS

div { position: relative; width: 300px; height: 150px; } button { position: absolute; top: 50px; padding:6px; left: 120px; }

<强>假设：
你需要一个播放器上的播放按钮 2.隐藏视频控件 3.点击
时应隐藏播放按钮

AngularJS：视频禁用自动播放和预加载不起作用

1 个答案: