Having issues with video playback on AngularJS

I've been working on creating a video player with angular js but I'm encountering issues with playing the video. Here's what I have attempted:

    videoPlayer.factory('controloptions',function()
{
    var controloptions={};
    controloptions.state="play";
    controloptions.volumestate="high";
    controloptions.videoElement=angular.element(document.querySelector("#video_play"))

    controloptions.play1=function($event)
    {
        angular.element(document.querySelector("#video_play")).play(); 
        alert("a")
    },
    controloptions.pause1=function($event)
    {

        console.log(controloptions.videoElement)
        //controloptions.state="pause";
        angular.element(document.querySelector("#video_play")).pause(); 
    }
   }

Uncertain if this is the correct approach for playing a video...

javascriptangularjs

Answer №1

Utilizing angular.element results in a jquery/jqlite element being generated, offering a specialized array of methods. The play() method is not included in this set.

document.querySelector("#video_play").play(); // Functions properly
angular.element(document.querySelector("#video_play"))[0].play(); // Also functions correctly

Creating a jquery object without saving it for future use seems rather pointless.

But is this the angular way™? Potentially. You could encapsulate the complexity within a directive to keep it out of sight, but ultimately you still need to reference the html-element at some point. 

// A possible cleaner approach.
$scope.video = $element.find('video')[0];
$scope.video.play();

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 the method for adjusting the camera without being restricted by its axes?

I've modified some code from the example at to create a simplified version without certain elements like flying cubes and jumping: var camera, scene, renderer, controls; var objects = []; var raycaster; var moveForward = false; var moveBackward = fa ...

javascriptthree.js3dcamera

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

When the document is fully loaded on a page that has been dynamically loaded

Currently utilizing the following: $("#someDiv").load("ajax.html") The contents of "ajax.html" include a document.ready call: <script>$(function() { alert('works') })</script> I'm interested to know exactly when this callbac ...

javascriptajaxjquery

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Currently, I have successfully implemented a jQuery autocomplete feature on the text input of a table data element called txtRow1. The data for this autocomplete is fetched remotely from a MySQL database and returned in JSON format as 'value' for ...

javascriptjqueryhtmljquery-ui

Extracting a compressed file in node.js to a specific web address location

I am currently developing an application using the express framework that allows users to upload a zip file and view its contents on the website. While I have successfully implemented uploading a single HTML file and displaying it, I am struggling with e ...

javascriptnode.jsexpresszipunzip

Exploring JSON data through key-value pairs

When faced with a de-serialized JSON object that has an arbitrary structure and mixed value types... var data = { 'a':'A1', 'b':'B1', 'c': [ {'a':'A2', 'b':true}, ...

javascriptjson

Reload the Node.js webpage

Is there a method to automatically refresh a Node.js page following a socket.io event? var messageDynamic = "Initial status"; app.get("/", function(request, response) { response.setHeader('Content-Type', 'text/plain'); respons ...

javascriptnode.js

Traverse the array containing nested arrays to generate fresh objects in AngularJS

After retrieving an object from my REST API, I need to iterate over the array and create new objects/arrays from it. The structure of the array is as follows: orderItem contains menu_modifier_groups, which in turn contain menu_modifier_items. The hierar ...

javascriptarraysangularjs

Updating the legend boxes of a chart in Chart Js to match the style of the graph lines

I need assistance updating the legend boxes of my graphs with graph line style. https://i.sstatic.net/zhi4L.pngActual Consumption https://i.sstatic.net/dAjlp.png Average Use https://i.sstatic.net/YMC7I.png Here is the code snippet I am currently using, ...

javascriptangulargraphchart.js

What is the most effective method to retrieve the current browser URL in Angular 2 with TypeScript?

Is there a way for me to retrieve the current URL from the browser within my Angular 2 application? Usually in JavaScript, we would use the window object for this task. Can anyone guide me on how to achieve this in Angular 2 using TypeScript? Appreciate a ...

javascripttypescriptangular

Generate your own unique referral links today

Searching for ways to generate and monitor referral links like www.domain.com/?ref=switz What steps should I take to accomplish this? ...

phpjavascriptjquerymysql

Using ReactJS to incorporate events with an external DOM element

I am using ReactJS version 16.13.1 and I have the need to display an external DOM element along with its events. Let's consider having a <button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Sir ...

javascriptreactjsdom

What is the process for updating the renderValue in a Mui React Select component to display a different array?

Is there a way to customize the renderValue function of a Material-UI Select component to display an array of the printname key values from the corresponding dictionary? I am storing the lang.code values in the paramvalues array as I need them for URL par ...

javascriptreactjsarraysmaterial-ui

The issue with Angular's $locationProvider not successfully removing the # from the URL

I am a beginner in Angular, and I am attempting to eliminate the # from the URL in an Angular route using the $locationProvider but my code is not functioning as expected. I have tried the following: <html> <head> <script src="https://ajax. ...

angularjsangular-ui-router

Drawing mysteriously disappeared from the canvas

Having trouble with my JavaScript code. I created a function called drawLine to trace lines on a canvas from one point (x,y) to another point (xdest, ydest). The first few lines display correctly but after the fourth line, it stops working and I can't ...

javascriptcanvas

What is the best way to animate an element to slide down when it is hidden with

I'm working on an html tag called "loginBox" (<loginBox> ... </loginBox>) that is initially hidden with display:none. When a user selects an option, I want it to smoothly slide down instead of just appearing and disappearing. How can I ach ...

javascriptjqueryhtmlcss

What is more effective: storing user favorites in a database or XML format?

Currently, I am developing an application with Ionic2 and AngularJS which includes a feature to add items to favorites. I am deliberating on whether it is better to store this information in a database or an XML file. Therefore, my query is which approach ...

angularjsionic2

Is there another way to retrieve a marketplace's product details using code?

When it comes to scraping products from various websites, I have discovered a clever method using window.runParams.data in the Chrome console. This allows me to easily access all the information without having to go through countless clicks to extract it f ...

javascriptpythonhtmlweb-scraping

Distributing the event object without the use of jQuery

Sorry for the basic question. It's been a challenge to find information on JS event handling without running into jQuery examples. I'm focused on DOM manipulation using pure Javascript to gain a deeper understanding of browser functionality. I w ...

javascripthtmldom

Bidirectional data binding in Angular for dynamically-created forms

I am currently facing an issue with creating three dynamically generated forms that are supposed to have separate two-way data binding. However, I am encountering a problem where the values entered in one form are being duplicated in all other instances of ...

angularjs