I downloaded the video-js-4.2.1.zip from http://www.videojs.com/ and in demo.html I changed the source file for the video but it won't load. I've even inputed the full http:// adress and still doesn't work. It only works with the demo video from http://www.videojs.com/ . How to make it to work?
Respectfully,
Vasile Lucian BUJOR
PS. Here is the code ( I add a png for the poster and removed the captions from the original code and renamed demo.html to index.html ):
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
poster="principal.png"
data-setup="{}">
<source src="/wildelife.mp4" type='video/mp4' />
<source src="/wildelife.webm" type='video/webm' />
</video>
</body>
</html>
It may help to check the documentation on the github repository ( https://github.com/videojs/video.js/blob/master/docs/setup.md ).
Also try not making a / in front of the video-path. Try:
<source src="wildelife.mp4" type='video/mp4' />
if the path to the file is in the same folder like your .html-file.
I don’t know what else to say, it’s perfectly working over here. You could check on your folder structure anyways.
hope that helps
Related
I'm trying to play live tv channel with videojs. I've tried various ways but always get "No compatible source was found for this media." error. Other videos are playing fine.
The url plays fine in VLC and the codec shows the stream as "MPEG-H Part2/HEVC (H.265) (hevc)".
I've tried across a range of browsers too, chrome, firefox, safari and edge.
This is the bones of the code. Is there a way to play it ?
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<video id='live-video' class='video-js vjs-default-skin' controls>
</video>
<script>
var player = videojs('live-video');
player.src({ src:'https://www.example.com/play.php?OTUxE2NDUN', type:'application/x-mpegurl'});
player.play();
</script>
I've concluded there is nothing wrong with the coding you show in your base posting (question). I speculate that the ACTUAL source URL you were using is NOT a valid HLS stream, and hence the cause of your stated error.
(It's possible that it is a valid DASH stream, but I'm reasonably certain
your code would NOT work with a DASH stream.)
Here's is some working code that is equivalent to yours, except that it
uses the newer (recommended) UI / API, mentioned in the Video.js live tutorial.
The key to WHY the code below works is simply that it DOES reference a valid HLS stream...(a URL that I stumbled upon, on the Internet).
<!DOCTYPE html>
<html>
<head>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<!-- [ Note: HLS code is "built-in" to video.js, as of version 4.x, so we should NOT include (possibly older?) HLS support separately ] -->
<!-- script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script -->
<!-- script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script -->
</head>
<video id='live-video' class='video-js vjs-default-skin vjs-live vjs-liveui' width='640' height='360' controls muted>
</video>
<script>
// The extra 'liveui' arg below, and two extra classnames are not REQUIRED, but documentation-tutorial
// refers to it as the newer/preferred API See: https://docs.videojs.com/tutorial-live.html
var player = videojs('live-video', {liveui: true} );
player.src({ src:'https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8', type:'application/x-mpegurl'});
// Note: We begin with the stream playing, but the audio is initially 'muted' (see that attribute in video tag above )
// See: https://stackoverflow.com/questions/70719678/html5-video-autoplay-with-sound-unmuted
player.play();
/* Note: Their "playlist.m3u8" file in their URL contains these lines (this info helps us understand the goal of their HLS)
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=2130537,RESOLUTION=1920x1080,CODECS="avc1.4d4028,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_1080p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1292733,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_720p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=557217,RESOLUTION=640x360,CODECS="avc1.77.30,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_360p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=418515,RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_240p/chunks.m3u8
*/
</script>
</body>
</html
Here is a simpler method of playing streaming video in your webpage. You can customize it to your liking by adding parameters and code from the video.js website guide.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>UN Web TV</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js
</script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
<source src="https://cdnapi.kaltura.com/p/2503451/sp/250345100/playManifest/entryId/1_gb6tjmle/protocol/https/format/applehttp/a.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>
I am testing a script that would essentially let me pull the video source URL through ajax and change the video source to try to hide the source of my video files from users (basically dont want people downloading my content).
I have no issues getting the ajax to work, but the "replaceChild" command doesnt seem to be doing anything for me. I stripped out all the ajax and tried to run a basic function calling this command with "alerts" along the way to show me what is working and what is not, it appears to me that the replaceChild command is not working.
Can anyone spot any issues with my code or offer alternate solutions?
<!DOCTYPE html>
<html>
<head>
<title>Test Script</title>
<meta name="robots" content="noindex,nofollow">
<script type="text/javascript">
function testFunction(){
var video = document.getElementById("video2").getElementsByTagName("source")[0];
var source = "realvideo.mp4";
clone = video.cloneNode(true);
alert(clone.src);
clone.setAttribute("src",source);
alert(clone.src);
video.parentNode.replaceChild(clone,video);
alert(video.src);
}
</script>
</head>
<body onLoad="testFunction()">
<div align="center">
<video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="realvideo.mp4" type="video/mp4">
</video>
</div>
<div>
<video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="sorry.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
That code alerts "sorry.mp4", "realvideo.mp4", "sorry.mp4"
This is expected behaviour. When you call:
video.parentNode.replaceChild(clone,video);
video will not suddenly become a different element. It will still have the same src attribute as before. video is detached from the document by the above replaceChild call, and clone is injected in its stead... it's an in/out swap. So you should not expect that video still references the element in the document and becomes the same reference as clone.
To really verify the change you could end your function with this code:
video = document.getElementById("video2").getElementsByTagName("source")[0];
alert(video.src);
I am using Video.js to play a video on my site and would like to disable the default double click to full screen behaviour.
I found this in the docs but not sure how to implement it. I have tried placing the suggested code in my main.js file but I guess I need to do something else as that doesn't work?
This is the simplified video.js code I'm using:
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.8.2/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>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<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 src="https://vjs.zencdn.net/7.8.2/video.js"></script>
</body>
</html>
As you're using data-setup to init the player, then add it to the JSON string:
data-setup='{"userActions": {"doubleClick": false }}'
I am using video.js to get YouTube videos through their YouTube plugin, everything works just fine but in Firefox MAC OSX it won't work, is that a bug for videojs or its just a problem of mine?
Here is the code I'm using
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="../css/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/4.6/video.js"></script>
</head>
<body> <video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
</video>
<script src="../js/youtube.js"></script>
<script>
videojs('vid1', { "techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
// Cue a video using ended event
// Most video.js events are supported
this.one('ended', function() {
this.src('http://www.youtube.com/watch?v=jofNR_WkoCE');
this.play();
});
});
</script>
</body>
</html>
Please help, Thanks
The VideoJS Youtube Plugin does not yet support VideoJS v4.6.0. The plugin's author has stated that support will be added in an the next update, as seen in the following Github issue: Support for 4.6.0
VideoJS plays video in IE10 from local file, but not plays from another place (VZAAR videohosting)
In Console displays: Video Error,[object Object]
Are you sure you're using the correct video source URL? For Vzaar hosted videos, the URL will be in the format of:
https://view.vzaar.com/{videoID}/video
where {videoID} is your video's ID number. You can also find this URL on Vzaar by viewing your videos list and selecting 'manage' for the video you're using. The correct URL is the 'video' URL under 'advanced video links'.
A simple example of working code using the CDN version of VideoJS (replace your own video's ID, height, and width values):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VideoJS Vzaar playback test</title>
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
</head>
<body>
<video id="testVideo"
class="video-js vjs-default-skin"
controls preload="auto"
width="{videoWidth}" height="{videoHeight}"
poster="https://view.vzaar.com/{videoID}/image">
<source src="https://view.vzaar.com/{videoID}/video" type='video/mp4' />
</video>
</body>
It's server problem. Not octet-stream, but video/mp4