css - Angularjs Click 功能在 youtube Iframe 视频中不起作用,但部分适用于 css
问题描述
我正在尝试在 youtube iframe 中嵌入一个 angularjs click 函数,这样当
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>
解决方案
有no
办法在 angularjs 上下文中检测对 iframe 的点击,因为它完全在应用程序上下文之外加载。
您可能需要查看在 iframe 上检测点击事件的 jquery 方法,或者仅使用带有 HTML5 的视频元素来显示视频。