Question

Angularjs播放第一段视频，第二段视频不播放。

下面的angularjs代码播放第一个html5视频。当我单击第二个视频播放按钮时，它不会播放，而是仍然播放第一个视频。

我已经为视频分配了唯一的视频ID {{post.id}} 但仍然无法通过第二个播放按钮来播放自己的视频。

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <body ng-app='myapp'>
      <div class="content" ng-controller='fetchCtrl' >
         <div class="post" ng-repeat='post in posts'>
            <h3 >{{ post.title }}</h3>
            <div style="text-align:center">
               <button onclick="playPause()">Play/Pause</button> 
               <br><br>
               <video id="video1{{ post.id }}" width="420">
                  <source src="{{ post.vid }}" type="video/mp4">
                  Your browser does not support HTML5 video.
               </video>
            </div>
            <script> 
               var myVideo = document.getElementById("video1{{ post.id }}"); 

               function playPause() { 
                   if (myVideo.paused) 
                       myVideo.play(); 
                   else 
                       myVideo.pause(); 
               } 

            </script> 
            <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": "2v.mp4"
                        },
                        {
                            "id": "2",
                            "title": "video 2",
                            "vid": "3v.mp4"
                        },
                    ];
                    $scope.posts = data;
                }
                $scope.getPosts(); // Fetch post data
                $scope.setResponse = function () {
                    alert('you click me');
                }
              }]);
      </script>
   </body>
</html>

Angularjs播放第一个html5视频，第二个视频不播放

0 个答案: