The play button in videojs is unresponsive when incorporated into JavaScript responses

I've been trying to implement a video player using video.js, but I'm running into issues with the play button not responding to my JavaScript code. I have all the necessary scripts included in my file, but I haven't been able to find a solution that works. Can anyone help me troubleshoot this problem?

<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>

<video id="video_source"
class="video-js "
controls
preload="auto"
data-setup="{}"
style="width: 100%;height: auto;">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>

<script type="text/javascript">
$(function () {
var video_url = "videos/3D2EE6C8325B48068FF2F56FCE.mp4";
var video_src = '<source src="'+video_url+'" type="video/mp4" />';
$(".vjs-tech").html(video_src);
videojs("video_source");
});
</script>

Answer №1

For dynamically setting the source of your video element using videojs, you can utilize the method src(sourceopt):

$(function() {
  var video_url = "SampleVideo.mp4";
  videojs("video_source")
    .src(video_url);
});

Credit

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

I'm encountering an issue in my server.js file where I am unable to read the property 'collection' as it is undefined

I have encountered an error in my code: /home/ubuntu/workspace/server.js:43 db.collection('quotes').find().toArray(function(err, results) { ^ TypeError: Cannot read property 'collection' of undefined at Object.<anonymous> ( ...

Error message: Unauthorized request error with the change.org JavaScript API

I am currently working on integrating the javascript API from change.org in order to retrieve all of my signed petitions for display on my source forge page. However, I am encountering an unauthorized request response from the change.org API. Despite tryi ...

This particular JavaScript function is only designed to operate on the initial input box in the provided

I have a question regarding echoing rows of $data inside input boxes. I am using a JavaScript function that is supposed to copy the input value to the clipboard when the input box is clicked. However, I am encountering an issue - the function only works ...

Can you please explain the significance of file.max and file.FBX within the context of a model in three.js

I am currently working on developing a video game using three.js. Recently, I downloaded a model from the internet and upon checking the directory, I found the following files: city.obj city.mtl city.max city.FBX After some research, I learned that cit ...

What could be causing the issue with setting a value for a JSON array in the following method?

Consider this piece of code that I'm currently working with: compareList[productName] = productID + ',' + productHref; console.log(productName + ' ' + productID + ' ' + productHref + ' ' + compareList.length); ...

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Hey everyone, I'm having a bit of trouble with my modal. It appears correctly when clicked to open, and the close buttons seem to detect that my mouse is hovering over them. However, when I click on the buttons, nothing happens and the modal remains o ...

Exporting an HTML table to Excel while excluding any hidden <td> elements

I have a web application with an HTML table that displays data to users. I wanted to export the table to Excel and found a jQuery code for it. However, the exported data includes information that is hidden in the table. Is there a way to export the tabl ...

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

JavaScript syntax issue detected, semicolon missing

I've encountered an issue with a form that contains potential errors defined in PHP. To dynamically change the form action based on the presence of errors, I have incorporated JavaScript into the process. The PHP error variable, $errors, has been conv ...

What is the best way to retrieve table field values and display them in a modal box?

Data Table Display <tbody id="batch_view" class = "a-checkbox"> <% @batches.each do |batch| %> <tr> <td class="<%= batch.id %>"><%= batch.date.strftime("%Y-%m-%d") if !batch.date.nil? %></td> <td> ...

Google Chrome does not support inlined sources when it comes to source maps

Greetings to all who venture across the vast expanse of the internet! I am currently delving into the realm of typescript-code and transcending it into javascript. With the utilization of both --inlineSourceMap and --inlineSources flags, I have observed t ...

Next.js: Attempting to access properties of undefined (specifically, attempting to iterate over an undefined value using the 'map' method) in React.js (Next

Hello there, I need some assistance with an error that I am encountering. It seems to be unique to me as I'm following a course on YouTube and only I am facing this issue. Can anyone help me out? import Head from 'next/head'; import styles f ...

Unable to load the node modules

In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...

Struggling to find multiline content in a SWIFT message using regex

Looking into a SWIFT message using RegEx, here is an excerpt: :16R:FIN :35B:ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (CH) INDEX EQUITY FUND USA :16R:FIA The goal is to extract information in group 3: ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (C ...

Simple request results in an error

I have been experimenting with the Electrolyte dependency injection library, but I am encountering an error even when trying a simple script that requires it. I haven't come across any discussions or problems similar to mine in relation to this issue ...

The sort function in Reactjs does not trigger a re-render of the cards

After fetching data from a random profile API, I am trying to implement a feature where I can sort my profile cards by either age or last name with just a click of a button. Although I managed to get a sorted array displayed in the console log using the h ...

Sliding carousel from right to left

I'm currently working on setting up a slick carousel to continuously scroll, but I need it to move in the opposite direction. Despite trying to add the RTL option, I couldn't get it to work as intended. Check out my Fiddle here (currently scroll ...

Form an item using an array

Is there a way to efficiently convert this array into a map? Here is how the array looks: var array = [{ "id" : 123 }, { "id" : 456 }, { "id" : 789 }]; The desired output should be: var result = { "123": { id: 123 } , "456": { id: 456 } , ...

Eliminate all elements marked with a particular class when the user clicks outside of a

I am currently building upon a project that I previously started here. Essentially, what I'm doing is dynamically generating tooltip popups that appear next to a link when it is clicked. However, I now need these tooltips to close when any click even ...

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...