Show vimeo videos using ng-repeat angularjs and videojs player

I need help trying to showcase videos using angularJS. Below is the code I have:

<span class="video-inner" ng-repeat="item in items">
    <video id="video-{{item.id}}"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="600"
        height="200"
        data-setup='{
            "techOrder": ["vimeo"],
            "sources": [
                { "type": "video/vimeo", "src": {{item.video}} }
            ]
        }'>
    </video>
</span>

And here is the data:

   $scope.items = [
       {id: 1, video: "https://vimeo.com/63186969"},
       {id: 2, video: "https://vimeo.com/63186969"}
   ];

I tried using this example: but unfortunately, it's not working. Can you point out what I missed?

javascriptangularjsangularjs-ng-repeatvimeovideo.js

Answer №1

There's no need to use double curly braces {{}} for interpolation: 

<video id="video-item.id"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="600"
        height="200"
        data-setup='{
            "techOrder": ["vimeo"],
            "sources": [{ "type": "video/vimeo",
            "src": item.video}]
            }'>
 </video>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to invoke the unnamed function in jQuery using the .call() method?

Imagine I have a button with the ID #click, And let's say I attach the click event like this: $('#click').click(function(){ alert('own you'+'whatever'+$(this).attr('href')); }); However, I wish to change w ...

javascriptjqueryfunction

Dynamic scrolling feature for lists that moves horizontally

When working with a lengthy list, I encountered an issue with horizontal scrolling. It worked fine when the list was statically implemented as shown below. <div style="margin-top:100px;white-space: nowrap;"> <ul > <li style= ...

javascriptvue.js

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

HTML element resizing unexpectedly due to browser interactions

I recently created a sleek HTML transparent header bar using the following CSS: #head-bar{ position:fixed; top: 0px; width:100%; left:0px; min-height:25%; z-index:2; background-color:#000; background: rgba(0, 0, 0, 0.5); } ...

javascriptjqueryhtmlcss

Is there a way to display the inbox area upon completion of the document loading process?

I'm currently working on creating an inbox feature for my personal portfolio, mostly as a learning exercise rather than for any practical use. However, I've run into an issue where all emails are being displayed by default when the page loads wit ...

javascriptphpjqueryajax

Retrieve the input data following validation of an AngularJS form

Hello there! I am relatively new to utilizing AngularJS and Bootstrap. Recently, I have created a login form using AngularJS and Bootstrap CSS. Below you will find the code for my form: <form name="userForm" ng-submit="submitForm(userForm.$valid)" nova ...

javascriptangularjscodeignitertwitter-bootstrapcodeigniter-2

Utilizing requirejs or grunt for concatenation and minification greatly enhances the performance of AngularJS implementations

I'm facing a dilemma with my Angular app. I have several JS files included in the index.html file, and when the app loads, all these files are downloaded before the app is ready. <html> ... <script src="scripts/controllers/loginController.js ...

javascriptangularjsrequirejsgruntjs

Is it possible for a visitor to view every file on my website?

As a newcomer to web development, I am currently working on a website utilizing Node.js and express. The challenge I am facing is ensuring the security of sensitive information stored in certain files, such as payment codes, on the server side. Despite my ...

javascriptnode.jsamazon-web-servicesexpress

Tips for retaining the original size of an image in HTML5 canvas drawImage

function getBase64ImageData(_id) { var canv = document.createElement('CANVAS'); var context = canv.getContext("2d"); var imageElem = document.getElementById(_id); context.drawImage(imageElem, 0, 0); var dataURL = canv.toDat ...

javascripthtmlimagecanvas

Using JavaScript to convert a UTC Date() object to the local timezone

I am working with a Date() object that holds a UTC date. I need to convert it to the local timezone of the user. Any suggestions on how I can achieve this? Let me know! :-) ...

javascriptdatetimeutc

I am looking to create a straightforward AngularJS unit test for a controller that successfully passes the defined criteria

Testing the definition of the controller. 'use strict'; mainApp.controller('HeaderCtrl', function ($scope, sessionSrvc, eventSrvc, $state) { // Code for handling user session and visibility of sign in/out buttons /** * ...

angularjs

Removing a specific item from a Kendo UI dropdown list

Recently, I encountered a predicament with a dropdownlist populated from a datasource. Following a certain event, my goal is to eliminate a single item from the dropdownlist identified by id = 22. Although I recognize this may not be the best practice du ...

javascriptangularjskendo-uikendo-dropdownkendo-datasource

Enhancing data with AngularJS and Firebase

I enjoy using firebase, but sometimes their documentation lacks detail. When updating changes in the database, I follow their instructions. var ref= new $window.Firebase('https://mysite.firebaseio.com/arcade/'+$scope.gameID+'/scor ...

angularjsfirebase

Efficiently convert Map keys into a Set in Javascript without the need to copy and rebuild the set

Even though I am capable of const set = new Set(map.keys()) I don't want to have to rebuild the set. Additionally, I prefer not to create a duplicate set for the return value. The function responsible for returning this set should also have the abili ...

javascripttypescript

Adding external data to an ng-repeat scope in AngularJS

Encountering a problem with AngularJS ng-view and ng-repeat, specifically related to managing the scope. Using ng-repeat to display a list of items from an array, with a button outside the ng-repeat scope triggering an array update on ng-click. However, un ...

javascriptangularjs

Unlimited possibilities with parameters on an express server

I've set up React Router with recursive parameters, similar to the example here. On my Express server, I'm attempting to handle routes like /someRoute/:recursiveParameter? router.get('/someRoute/:recursiveParameter?', async (req, res ...

javascriptnode.jsexpress

Utilizing JQuery to Modify XML File Content

Looking to retrieve data from an XML file using jQuery and display it in a textbox? If you want changes made in the textbox to reflect back in the original XML file, there are ways to achieve this. Here is some code that can help: <html><head&g ...

javascriptxmljquery

Using JavaScript to delete the initial option from a dropdown menu

Below is the code snippet: <select id="List" name="UserType" onChange ="hide"> <option value="0" disabled="disabled" selected="selected">User Type</option> <option value="1" onclick="hide">Administrator</option> ...

javascripthtmldrop-down-menuhide

Ensuring secure communication with PHP web service functions using Ajax jQuery, implementing authentication measures

jQuery.ajax({ type: "POST", url: 'your_custom_address.php', dataType: 'json', data: {functionname: 'subtract', arguments: [3, 2]}, success: function (obj, textstatus) { if( !('error' in obj) ) { ...

javascriptphpjqueryajaxweb-services

Display the array of selected values on the console upon clicking the submit button

After creating a function that saves checked values in the 'Arr' array, I am facing an issue where the array is being printed multiple times when the "View Results" button is clicked. This results in the checked values appearing multiple times on ...

javascriptarrays