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
