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>
Related
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 have a problem that IE11 isn't playing my html5 video tag video. I've tried other browsers like Chrome/Firefox and there it works perfectly fine. IE11 doesn't even give me an error in the console why it isn't playing the video and shows me white background. I tried different formats like .m4v and mp4. The video is in h264 encoding and web optimized(I'm using software named "Handbrake" to encode the video"), the resolution is 1920x1088. I also tried to put "" in my website head.
My HTML code
<video autoplay loop muted id="player">
</video>
<img id="backfill-image" src="<?php bloginfo('template_url'); ?>/img/backgroundimage.jpg">
</div>
My JavaScript
let myPlayer;
let backfill;
window.addEventListener('DOMContentLoaded', (event) => {
myPlayer = document.getElementById("player");
backfill = document.getElementById("backfill-image");
myPlayer.onerror = function() {
console.error(myPlayer.error);
showPlaceholderImage();
};
// Example invalid source to throw an error
myPlayer.src = ""+templateUrl+"/img/myvideo.m4v";
// Example valid source that doesn't throw an error
// myPlayer.src = "https://www.w3schools.com/tags/movie.mp4";
function showPlaceholderImage() {
myPlayer.style.display = "none";
backfill.style.display = "block";
}
});
I tried to make a test with the MP4 format H264 encoder video.
It looks like it is working fine on the IE 11 browser.
Here is a test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
<video width="400" autoplay>
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</body>
</html>
Here, you can see that I have verified that the video has an H264 encoder using a VLC player.
Output in the IE 11 browser:
Video downloaded from this site
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
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