CODEWITHSUNDEEP
javascriptvideohtml5-videovideo.js
Koby Douek
Koby Douek

Reputation: 16675

Video.js: Error after setting video src

I'm having trouble using video.js when running videojs('vid'). My goal is to create a video.js object so I can read the current time (myPlayer.currentTime).

HTML:

<video id="vid" class="video-js" controls autoplay data-setup="{}">
    <source id="src1">
</video>

Javascript:

$(document).ready(function () {

    videojs('vid').ready(function () {
        var myPlayer = this;
        myPlayer.src({ type: 'video/mp4', src: '/uploads/365.mp4' });
    });
});

This gives me an error:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

important: When Setting the src without performing videojs('vid'), the same video works fine. It's like running videojs('vid') resets all sources and fails to set the src via Javascript.

Upvotes: 1

Views: 3351

Answers (2)

Koby Douek
Koby Douek

Reputation: 16675

I self-solved the problem by changing the src: '/uploads/365.mp4' to a full URL path: https://example.com/uploads/365.mp4.

Upvotes: 2

undefined
undefined

Reputation: 4135

You can get the currentTime in videojs with it's currentTime() function.

var output = document.querySelector('output');
var player = videojs('vid');

requestAnimationFrame(updateTime);

function updateTime() {
  output.innerText = player.currentTime();
  requestAnimationFrame(updateTime);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.0.1/alt/video-js-cdn.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.0.1/video.min.js"></script>

<video id="vid" class="video-js" controls autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

<output></output>

Upvotes: 0

Related Questions