Vzupo Vzupo - 1 year ago 44
CSS Question

angularjs controller with video

I have a snippet of code below, and what it does is when the image is clicked, it displays the video underneath. I am simply trying to align the video to be the same size as the image and fit snug underneathe it but make the image disappear as well. That way once the image is clicked, the video will displays seamlessly. Any help would be great!



<meta http-equiv="X-UA-Compatible" content="IE=10" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/ng-media.js"></script>



<script>

var myApp = angular.module('myApp', ['media']);

myApp.controller('MoocCtrl', function($scope, $http) {



$scope.videoSources = [];

$scope.loadVideos = function() {
$scope.videoSources.push('https://example.com/images/Intro.mp4');

};




});





</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body ng-App="myApp">

<div ng-controller="MoocCtrl">


<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 vidPlayer">
<a href="#" class="ImgButton" ng-click="loadVideos()"><img src="images/introImage.png" class="img-responsive"></a>


</div>
<video html5-video='{{ videoSources }}'autoplay='true' controls='true'></video>
</div>



</body>




Answer Source

You can add a thumbnail to the video. See this example

https://www.w3schools.com/tags/att_video_poster.asp

Hope this helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download