注意：请提供严格的角度解决方案。没有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/
先谢谢。
答案 0 :(得分：0)
以下是几乎没有假设的解决方案：
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.点击