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
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'm using the Video.js player to stream live content from my local webcam (but I guess that should not matter in that case, it could be any live stream from web). I wrote a really simple code:
<head>
<link href="video-js.css" rel="stylesheet">
<script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" data-setup='{}' autoplay="true" >
<source src="http://10.172.180.31:8090/live.flv" type="video/x-flv">
</video>
</body>
And now in that configuration I see the stream content, but there are couple errors:
1) I don't see the controls (to pause the stream)
2) Stream looks like this, so the video is not resized to the full size of the component. BUT (and that's really interesting) when I resize the elements on the webpage (e.g. in Chrome by holding control and scrolling the mouse wheel) to 110%, then the video fills the whole component. Seems like a bug in video.js or maybe my implementation is wrong?
3) when I remove the parameter autoplay="true" - nothing shows up, controls and video is gone and it's impossible to play it.
4) I wanted to remove the autoplay="true", but adding the poster info by including poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" - nothing has changed, the stream is not visible, the controls are not there.
5) when I remove the data-setup parameter and leave it like this:
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" > then the controls and poster are visible (which is great!), but the play button is greyed out and it's impossible to play my stream.
I want to achieve the effect that after loading the webpage I can see the poster image with play button, and when I click it - I will see the properly resized stream. What am I missing?
Thanks!
Try it without the controls
This works for me:
<video id="se_videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="auto" width="auto" data-setup="{}">
<source src="http://server/playlist.m3u8" type="application/x-mpegurl">
</video>
First of all, try to use the lastest release of video.js, you are using 3.2 version...
<link href="http://vjs.zencdn.net/4.12.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12.6/video.js"></script>
Secondly, if you are trying to use a live (stream) with videojs, you should see how videojs reads the stream sources: https://github.com/videojs/video.js/blob/master/docs/guides/tech.md#enabling-streaming-playback
Note that streaming urls need to have a specific pattern:
{protocol}://{your.streaming.provider.net/cfx/st}/{format}:{videoURL}.{format}
FLV is a video container, not a protocol, you should use a stream protocol such a RTMP(Flash), HDS(Flash), Mpeg/Dash or HLS(Apple).
Regards,
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
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