I have some videos located in an S3 bucket and Im referencing their links in a DynamoDB table along with some other relevant info (all as items). I have created a simple AngularJS app that retrieves the items from the Dynamo table via API Gateway and Lamdba and simply displays the info in a controller. Here is the body of my index.html:
<body> <div class="row" ng-controller="content"> <div class="col-8"> <p><b>{{content['course-title']}}</b></p> <p>{{content['course-video']}}</p> <p>The ID is {{content['course-content']}}</p> </div> </div> </body> and here is my .js for the single controller:
.controller('content', function($scope, $http) { $http.get('api link'). then(function(response) { $scope.content = response.data.body[0]; console.log(response) }); }); As you can see I am returning a json array in the response and referencing each element by name in the controller itself.
Everything is working fine with the process except for the video.
Here is my question:
One of the table items is a link to a video in S3 as follows:
https://xyz-videos.s3.amazonaws.com/video.mp4
How/what do I need to do to embed the video properly so it will display? It is referenced by:
<p>{{content['course-video']}}</p> Obviously, right now just the link is being returned. How do I incorporate it properly as a video source?
I tried using <video> element and I got the following error:
$interpolate:interr Interpolation Error.
I had to use ng-src, but still got the error
<video>element?