issue with displaying video as background in angularjs

Trying to create a video background using Ionic and AngularJS. I attempted to insert this code into the HTML, but the video is not working:

<source class="cvideo" src="background/{{current.currently.icon}}" type="video/webm">

When running it, the result obtained is as follows:

<source class="cvideo" src="background/'{{current.currently.icon}}'" type="video/webm">

However, if I remove the path background and only use {{current.currently.icon}}, the result displays the name of the video instead.

Answer №1

It is advisable to avoid using ' within the href attribute. Instead, utilize ng-src.

<source class="cvideo" ng-src="{{'background/'+ current.currently.icon + '.webm'}}"
   type="video/webm">

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

How to Align a Button in the Middle with Bootstrap?

Hey there! I'm working on creating a video list. I've utilized the bootstrap grid system to put it together. Here's the code I have so far: I'm trying to center the play button both vertically and horizontally within the thumbnail. Any ...

Using Ramda, learn how to transform a flat list into a hierarchical one

Looking to transform the given list into a hierarchical structure with nested children fields. The 'parentId' attribute has been omitted for clarity, as it will be used in the transformation process using Ramda's immutable behavior. const x ...

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Press the button to center the div, press it again to align it to the left. This feature is compatible with all browsers except for IE6, which does not support margin: 0 auto;. How can I find a solution to this issue? The width of the div is not fixed and ...

The concept of AJAX send function and toggling button visibility

I am facing a challenge with a textarea and send button on a panel that is displayed after entering the first character. The visibility of the button is controlled by the isButtonVisible() method. Once clicked, it sends the text from the textarea using the ...

Utilize a promise or await statement with a dynamically generated string variable

Currently, I am constructing a mongoose query and saving it in a variable named query. Below is the snippet of code showcasing this: let query = "Product.find(match)"; if (requestObject.query.sortBy) { query = query.concat(".", &quo ...

retrieve the classname by tapping into the parsed JSON

Being a newcomer to this technology, I am embarking on my first project. My task involves calling an API and receiving a large parsed JSON file. Within this extensive JSON response (which contains HTML code), I need to extract a specific class from the te ...

Filtering an array of <input> values in JavaScript based on the number of characters they contain

Can someone help me figure out why this JavaScript code isn't working as expected? The intention is to grab the input value from a text box (a string of words separated by spaces), convert it into an array, and then remove any words that are less than ...

Unlock a multitude of outcomes with Sequelize

Is there a way to retrieve multiple results from Sequelize and store them in an array? For example, I want to fetch all the values in the name field from the test table and display them in the console. This is what I tried: test.findAll().them(function(re ...

Display sibling element upon hovering with AngularJS

Within a single view, I have multiple instances of repeated content elements. Each content element contains an anchor element. My goal is to toggle a class on a sibling element within that specific content element when a user hovers over the anchor. For c ...

Tips on accessing internal functions within a single module.exports

I'm trying to integrate the getCursor function into the getOffsetCustom function in my code. While I have both functions exported, I can't seem to nest getCursor inside getOffsetCustom successfully. This file is being used for running node witho ...

Tips for implementing fetch in a GET request and displaying the outcomes on the screen

Currently, I am utilizing express router in Node for an endeavor to display a page with data retrieved from an API. Unfortunately, no results are returned, and I can confirm that the issue does not lie with the API itself. Upon manual inspection in the con ...

"Encountering a Heroku error due to an oversized cookie while using Express.js and

Being unsure of the exact cause, I am encountering an issue with Heroku that gives me the error message t=error code=H25 desc="HTTP restriction: oversized cookie" whenever I attempt to authenticate myself with Discord OAuth. Interestingly, this problem onl ...

Using Vuejs to pass the SAVE function into a CRUD component

I am facing a challenge in finding a suitable solution that involves advanced parent-child communication in Vue.js. The scenario is such that there are multiple parent components, each with its own logic on how to save data. On the other hand, there is onl ...

having difficulties retrieving the attribute value through jquery

I'm currently implementing this method on rowmouseevent. When I use $get(eventArgs.get_id()), the output is: <tr class="normal" data-value="normal" id="ctl00_ContentPlaceHolder1_UserGrid_grdusergrid_ctl00__0" style="height:30px;" /tr> How can ...

Node.js and socket.io come together in this collaborative text editing tool

I'm currently working on a collaborative app utilizing node and sockets that includes a simple text tool feature. My goal is for any user who types and applies text to the canvas to have that text visible to all other connected users. Here's wha ...

Is it necessary to utilize process.env in node.js?

In my project, there is a .env file containing the following: ABC='abc' While in my app.js I can access the value abc using process.env.ABC, how can I require it to be used in my models' files? Attempting to use process.env.ABC in my model ...

Leveraging PapaParse for CSV file parsing in a React application with JavaScript

I am encountering an issue with reading a CSV file in the same directory as my React app using Javascript and Papaparse for parsing. Below is the code snippet: Papa.parse("./headlines.csv", { download: true, complete: function(results, f ...

Challenges with JSON Documents

const fs = require('fs'); const express = require('express'); const app = express(); app.use(express.json()); app.get('/submit', (req, res) => { let Com_Title = req.query.ComTitle; let Com_Text = req.query.ComTex ...

Creating a JSON file using an object to send requests in Angular

In my Angular 7 project, I am trying to send a multipart request to the server that includes a file (document_example.pdf) and a json file containing a data object (data_object_example.json). The content of data_object_example.json is as follows: { " ...