Conclusion of video.js event

Why is this error being triggered?

The element or ID provided is not valid. (VideoJS)

Here is the code snippet that might be causing the issue:

<script type="text/javascript">
 var videoPlayer = _V_("example_video_1", {}, function(){
this.addEvent("ended", function(){ 
   alert('Here I am');
  });
});        
</script>

The video ID is set dynamically using PHP:

<?PHP
  echo "<video id=\"example_video_1\" class=\"video-js vjs-default-skin\" controls width=\"".$vid_h."\" height=\"".$vid_w."\" autoplay preload=\"auto\" data-setup='{}'>";
?>
javascriptvideo.js

Answer №1

Make sure that when you include your script, it is placed after the video element it pertains to. Otherwise, you may encounter the error "the element or ID supplied is not valid" because the element does not exist at the time the script runs.

For example:

<!DOCTYPE html>
<html>
<head>
  <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="360" height="202" autoplay data-setup="{}">
    <source src="http://example.com/video.mp4" type='video/mp4'>
  </video>
  <script type="text/javascript">
    var videoPlayer = _V_("example_video_1", {}, function(){
      this.addEvent("ended", function(){ 
        alert('I am here');
      });
    });       
  </script>
</body>
</html>

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 retrieve a variable from a geojson file using Vue 3 and Vite?

For my Vue 3 project, I am trying to import a variable from a geojson file. However, when I use import line from '@static/line.geojson', my page goes blank and it seems like Vue stops working. If I use import line from '@static/line.json&ap ...

javascriptjsonvue.jsvuejs3geojson

Vue component fails to register

In my current project, I am incorporating a custom component tag using Vue.JS. Although we have successfully utilized Vue.JS in past projects, the same approach isn't working this time. It seems like I must have overlooked something... After inspect ...

javascriptvue.jscomponentsvue-component

Every time I try to restart my React Project, it seems to encounter strange issues that

Currently, I am following a fullstack React tutorial which you can find here: React Tutorial I have encountered an issue where every time I close my laptop and reopen the project, npm start throws a strange error. Initially, I tried to fix it by starting ...

javascriptnode.jsreactjsnpmreact-fullstack

Creating an array from objects without manual effort

Greetings everyone, currently I am structuring my array in the following manner: var piece1 = new DialoguePiece(null, questions[0], 0, 0, 4, 1); var piece2 = new DialoguePiece(null, questions[1], 1, 0, 2, 3); var piece3 = new DialoguePiece(scripts[1], nul ...

javascriptarraysobject

Encountered an ERROR with MONGO_OBJECT_REMOVED while attempting to Add Data to Mongo Collection

While attempting to insert data into MongoDB, the console.log output for rcitems showed an error message indicating "MONGO_OBJECT_REMOVED". I am currently utilizing Meteor, Blaze, Simple-Schema, and Collection2. The expected outcome for rcitems is to dis ...

javascriptmongodbmeteormeteor-collection2

JavaScript hovering drop-down feature

Hi there, I'm just starting out with javascript and could use some help with a simple script. I have a shopping cart drop down that currently activates when clicked. However, I want it to fade in when hovered over instead. I've tried using .hove ...

javascriptjquerycss

Charting multiple datasets in a line graph based on provided tabular

I am currently working on generating a multi-set line graph using Chart.js and Angular. With the help of map function, I have been able to transform the JSON data into a single-dimensional array. However, my challenge lies in converting one of the columns ...

javascriptangularjschart.js

Leverage a single JavaScript file across all Vue components without the need for individual imports

My project includes a JavaScript file called Constant.js that stores all API names. //Constant.js export default { api1: 'api1', api2: 'api2', ... ... ... } Is there a way to utilize this file without having to impo ...

javascriptvue.js

Unable to navigate using react-router after logging out without a page refresh

In my logout approach, everything seems to work fine - there are no errors in the console, localHistory is cleared successfully, but for some reason it cannot navigate to the login page without refreshing the current page. const handleLogout = () => { ...

javascriptreactjsangularecmascript-6react-router

Executing asynchronous JavaScript calls within a loop

I've encountered an issue with asynchronous calls in JavaScript where the function is receiving unexpected values. Take a look at the following pseudo code: i=0; while(i<10){ var obj= {something, i}; getcontent(obj); / ...

javascriptjqueryloopsasynchronous

Generating intricate JSON structures with JavaScript programming instructions

In the world of JSON, I am still a novice. I need to use JavaScript to construct the JSON structure below, but I'm struggling with adding the second element ("12101") and populating the people in the JSON Structure. Below is the code I tried, however, ...

javascriptjson

Using the TIMESTAMP data type in PostgreSQL and getting the most out of it

After saving a Luxon datetime value in a TIMESTAMP(3) type column in a postgres database, I encountered difficulty using it for various operations like converting time zones. Despite creating the object with the code snippet below: const { DateTime } = req ...

javascriptsqlnode.jspostgresqlluxon

Fill a CSS grid with pictures

I have a collection of 100 images in the same size that I would like to arrange within a CSS grid. The folder contains: seperate-0.png seperate-1.png seperate-2.png seperate-3.png and so on... The CSS code below shows the grid struct ...

javascriptimage

Unable to function properly on Backbone.js, events have been rendered ineffective

I have recently created a view with the following code snippets: var app = app || {}; app.singleFlowerView = Backbone.View.extend({ tagName: 'article', className: 'flowerListItem', // specifies where to render the views templ ...

javascriptjquerybackbone.js

Is there a way to stop window.pageYOffset from resetting every time the page is rendered?

I've been working on a react component that changes the header based on the scroll event. By attaching an event handler and toggling a display class to show or hide certain elements depending on the scroll position. However, I've encountered som ...

javascriptcssreactjs

Obtain the value of an element from a React UI Material component (e.g. ListItemText)

Incorporated an onClick() event where a function is invoked to retrieve and display the value of any clicked element within the HTML body in a web component. <div id="root" onclick="handleClick(event)"></div> This snippet o ...

javascriptreactjsmaterial-ui

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

javascriptjqueryhtmlcss

Converting Epoch timestamp to AM/PM format in a React render function

I am currently working on a personal project using React.js. I have successfully fetched an API, and one of the values returned is an Epoch timestamp. My goal is to display this timestamp in a human-readable format such as am/pm. The Epoch timestamp is dis ...

javascriptreactjstimestampepoch

html line breaks $.parseJSON

Within my website, I am currently utilizing a TinyMCE window. The method involves PHP fetching an entry from the database, decoding it as JSON, and then having in-page JavaScript parse it. However, issues arise when there are elements like style='colo ...

javascriptphpjsontinymce

Modify text input when a different option is selected (with both options originally coming from a database)

A dropdown menu is filled with options from a database, and the chosen option is compared to a variable $comp_cntry currently on the page: <select name="country"> <option value="--" disabled>Please Select...</option> <option v ...

javascriptphpjquery