我正在尝试在 youtube iframe 中嵌入一个 angularjs 点击功能，这样当
1.) 用户点击 youtube 视频，它会提示例如“你点击我”，视频将立即开始播放。
2.) 当用户点击它停止视频时，它会再次提醒并且视频将像往常一样停止播放。
这是 angularjs 函数 ng-click='setResponse()'
如果我添加 css 并按照下面的代码调用它。点击功能将起作用，但 视频不会开始播放或停止
<style>
div.iframe-link {
position: relative;
float: left;
width: 115%;
height: 516px;
margin: 0 1em 1em 0;
}
a.iframe-link {
text-decoration:none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:100%;
height:100%;
}
</style>
<div class="iframe-link">
<iframe width="560" height="315" ng-src="{{post.vid | trusted}}"
frameborder="0" allowfullscreen></iframe>
<a class="iframe-link close" ng-click='setResponse()' target="_blank"> </a>
</div>
下面是没有css参与的完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app='myapp'>
<div class="content" ng-controller='fetchCtrl' >
<div class="post" ng-repeat='post in posts'>
<h3 >{{ post.title }}</h3>
<iframe ng-click='setResponse()' width="560" height="315" ng-src="{{post.vid | trusted}}"
frameborder="0" allowfullscreen></iframe><br><br>
</div>
</div>
<!-- Script -->
<script src="angular.min.js"></script>
<script>
var fetch = angular.module('myapp', []);
fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.getPosts = function(){
data =[
{"id":"1",
"title":"video 1",
"vid":"d0cmelmlrTI"},
{"id":"2",
"title":"video 2",
"vid":"ItCv7ZZvUX8"},
];
$scope.posts = data;
}
$scope.getPosts(); // Fetch post data
$scope.setResponse = function(){
alert('you click me');
}
}
]);
fetch.filter('trusted', ['$sce', function ($sce) {
return function(vid) {
var video_id1=vid;
return $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + video_id1);
};
}]);
</script>
</body>
</html>
最佳答案
没有方法可以检测在 angularjs 上下文中对 iframe 的点击，因为它完全在应用程序上下文之外加载。
您可能需要查看检测 iframe 上点击事件的 jquery 方法，或者只使用带有 HTML5 的视频元素来显示视频。
关于css - Angularjs Click 功能在 youtube Iframe 视频中不起作用，但部分与 css 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51229854/