Update 64 for Chrome - <video> tag's mute attribute not functioning as expected

Click here to view the code snippet

<div ng-app="myApp" ng-controller="testCtrl">
   <section ng-if="url">
     <video id="player1" playsinline autoplay loop muted volume="0.0">
       <source ng-src="{{url | trusturl}}" type="video/mp4"> Your browser does not support the video tag.
     </video>
   </section>
</div>

Since updating to chrome 64, my video is no longer muting. When I move the video outside of the ng-if and hardcode the URL, it works correctly.

Any suggestions on how to solve this issue?

javascriptangularjsgoogle-chrome

Answer №1

I've discovered a temporary fix for the issue - by relocating the ng-if to the source element, it successfully mutes the video.

It appears that Chrome 64 has a mechanism that scans for video tags upon page load and if the tag is not present initially, it does not execute the muted attribute.

Answer №2

Encountering the same issue within my current Ember project posed a challenge.

To resolve it, I considered two possible solutions:

  1. Transferring the <video> tag(s) to the index.html file, as you also did
  2. Developing a function that could be invoked on an init or window.onload event 
    
mutePlayer1VideoHack() {
  const player1Video = document.getElementById('player1');
  player1Video.setAttribute('muted', true);
}

In solution #2, I opted to prefix the function name with Hack, anticipating a potential resolution for what might be a genuine Chrome 64 bug. Ultimately, I have chosen to implement solution #1 in my scenario.

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

What is stopping TypeScript from assigning certain properties to the HTMLScriptElement?

I'm currently working with TypeScript and React, and I'm facing an issue with a function that is meant to copy script attributes between two elements: type MutableScriptProperties = Pick< HTMLScriptElement, 'async' | 'crossO ...

javascripthtmlreactjstypescriptdom

Compiling this HTML template in dev mode with Vue is agonizingly slow

I've been working with a template app setup that was bootstrapped using vue CLI. Within one of my components, I have 20 nested div tags. During development mode, it's taking roughly 10 seconds to compile this component. The more deeply I nest HTM ...

javascriptvue.jsvuejs2vue-component

Integrate the ID attribute in CSS to create a scrolling background

I resorted to using Google Translate, so please don't inquire why. Currently, I'm working on a script where I am attempting to incorporate a variable (using JavaScript) into a CSS file. <span id="s-map"></span> {background: ...

javascriptjqueryhtmlcss

How can one save a text value element from a cascading list in ASP.NET MVC?

I have recently started learning about javascript, jquery, and ajax. In my model, I have defined the following classes: namespace hiophop.Models { public class CarMake { public class Category { public int CategoryID { g ...

javascriptc#jqueryajaxasp.net-mvc

Creating a route provider tailored to specific user roles

I have a rather straightforward requirement. There are 3 different User Roles: CATUSER LICUSER ALLUSER The User Role value is stored in the $rootScope.userRole variable. The User Role is predefined before the AngularJS application starts as the Angula ...

javascriptangularjsroute-providerangularjs-config

What is the best way to resume a paused animation using JavaScript?

My first game involves triggering an animation that transitions the game screen to greyscale when the character dies. Despite my efforts, I have been unable to successfully trigger this animation using document.getElementById("object").animationP ...

javascriptanimation

The event.currentTarget's attempt to toggle the class of the child element is not functioning as

I am having trouble toggling a class of a child element of the target element. I can't seem to get it to work and I'm unsure of what steps to take next. HTML: <div class="post-footer-icons-container-el" data-btntype="comment&qu ...

javascriptjqueryjquery-ui

Generate a key pair using the cryto library and then use it with the json

There's a new method called generateKeyPair in node 10, and I am utilizing it in the following way: const { publicKey, privateKey } = crypto.generateKeyPairSync("rsa", { modulusLength: 4096, publicKeyEncoding: { type: "spki", format: "pem ...

javascriptnode.jsjwt

When attempting to call a script function in PHP and expecting a return value, an error was encountered: "Uncaught SyntaxError

My functions are working fine: <script> function createCookie(name,value,sec) { if (sec) { console.log('createCookie: '+name+', '+value+', '+sec); var date = new Date(); date.setTime(date.getTime()+(sec*1000 ...

javascriptphp

The text color of the tabs turns black when a tab is selected - I receive my results after clicking anywhere on the screen

I am currently using HTML, CSS, and Bootstrap to design some tabs. Here is the current result I am achieving: https://i.sstatic.net/qbUck.png When clicking anywhere on the screen, I see the original results based on my code. The outcome after clicking a ...

javascripthtmlcsswebbootstrap-4

Removing an HTML element entirely

Although I am utilizing .remove() method and it is effectively removing the desired element, upon inspecting the page source by right-clicking in a browser window, I can still see those removed elements. It seems like they are not being permanently delet ...

javascriptjqueryjquery-ui

Having a quandary with Socket.io when using clients.length (where clients refers to io.sockets.clients();)

Typically, when sending JSON from one client to another, everything works smoothly. However, if there is only one client, packets are still being sent. To address this issue (on the server-side in node.js), I implemented the following solution: var client ...

javascriptnode.jssocket.io

Organize tabs with ease in the bootstrap-tabdrop plugin

My webpage features a navigation bar along with the bootstrap-tabdrop plugin, which places tabs in a dropdown menu if there are too many to display on one line. The main objective is: No action when navigating through currently displayed tabs. Clicking o ...

javascriptjquerynavbar

Tips for enlarging the box width using animation

How can I create an animation that increases the width of the right side of a box from 20px to 80px by 60px when hovered over? What would be the jQuery code for achieving this effect? ...

javascriptjqueryhtmlcss

JavaScript/CSS memory matching game

Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...

javascriptcss

Creating a dataset for D3 in JavaScript: A step-by-step guide

I am attempting to construct a graph similar to this: https://i.sstatic.net/USdyj.png. The graph represents a dependencies tree where each node has a list of elements it depends on as children (in a list), or a simple JSON structure with name and size info ...

javascriptjsonnode.jsd3.jsgraph

How can I maintain focus selection while replacing HTML with text in a contenteditable div without losing it?

When working with a div tag that needs to be editable, the goal is to prevent users from entering any HTML into the tag. However, despite efforts to restrict input, when users copy and paste content, it often includes unwanted tags. To address this issue, ...

javascriptjquerycontenteditable

How can we verify the validation status of the previous tab when moving to the next tab in a multi-tab form using metroJS

Currently, I am working on developing a multitab form within MVC AngularJS. My goal is to prevent users from moving on to the next tab without first completing the previous one. How can I implement tab validation in a multiform setup? Specifically, I am u ...

angularjsmodel-view-controllertabs

Assistance with jQuery in Javascript is needed

Currently, I am in search of an effective vertical text scroller. My desired scroller would move vertically in a continuous manner, ensuring there is never any empty space while waiting for the next text to appear. I am open to using either JavaScript or ...

javascriptjqueryscroller

How can we combine refs in React to work together?

Let's consider this scenario: I need a user to pass a ref to a component, but I also have to access that same ref internally. import React, { useRef, forwardRef } from 'react'; import useId from 'hooks/useId'; interface Props ext ...

javascriptreactjs