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
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 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 able to play the m3u8 files in the PC and android devices, but i am not able to play those files in the iOS mobile devices and safari browser,
I disabled the overrideNative to 'true' for the android devices, so its working in the android.
but we should not disable the native for iOS and safari, because iOS Safari uses a native player,
so I have set the overridnative false for the iOS. but its not working.
I am following new videojs versions.
videojs : 6.4.0
videojs contrib hls: 5.12.2
videojs flash: 2.0.1
Example
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls</title>
<link href="https://unpkg.com/video.js#6.4.0/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js#6.4.0/dist/video.js"></script>
<script src="https://unpkg.com/videojs-flash#2.0.1/dist/videojs-flash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls#5.12.2/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<h1>Video.js Example Embed</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="600" height="268"
data-setup='{}'>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>
<script>
let videojshls= videojs('my_video_1', { html5: {
nativeAudioTracks: false,
nativeVideoTracks: false,
hls: {
debug: true,
overrideNative: false
}
}});
</script>
</body>
</html>
example jsfiddle
please can anyone help me. thanks
Try this http://jsfiddle.net/fxfktztx/1/. It works for me.
var overrideNative = false;
var player = videojs('example-video', {
html5: {
hls: {
overrideNative: overrideNative
},
nativeVideoTracks: !overrideNative,
nativeAudioTracks: !overrideNative,
nativeTextTracks: !overrideNative
}
});
player.play();
As far I know, videojs options should be passed when the player is initialised, either with data-setup attribute or directly into the constructor as I did in the example above.
What I need: a script that will trigger all html5 videos on a page with the same class to play--once the page is loaded--because the html5 autoplay attribute is off limits.
I'm a javascript noob. I've written the script below to fix an issue where autoplay breaks on an html5 video because of a conflict with [skel.js] (https://github.com/n33/skel.old).
I can't write javascript from scratch, so I'm quite ignorant as to what is happening in this script; but, it does what I need it to do on my site. However, I bet it's written poorly or inefficiently. For example, I currently have a separate script for each video/class. I know it would be smarter to call all videos with the same class, but I don't know how. I'd love to know if there is extraneous or bad code here and if there is a better solution to get these videos to autoplay on page load?
Here is the code I'm using:
<script><!-- hack to fix html5 autoplay break when using skel.js-->
startplaying();
function startplaying(time) {
var run = setInterval(function() { $('.video1')[0].play(); }, 2000);
}
</script>
Here is my complete test code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
</head>
<body>
<video class="video1" width="100%" controls loop><!-- can't use autoplay becuase of a bug!-->
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.mp4" type="video/mp4">
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.ogg" type="video/ogg">
Your browser does not support this video.
</video>
<video class="video2" width="100%" controls loop><!-- can't use autoplay becuase of a bug!-->
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.mp4" type="video/mp4">
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.ogg" type="video/ogg">
Your browser does not support this video.
</video>
<script><!-- hack to fix html5 autoplay break when using skel.js-->
startplaying();
function startplaying(time) {
var run = setInterval(function() { $('.video1')[0].play(); }, 2000);
}
</script>
<script>
startplaying();
function startplaying(time) {
var run = setInterval(function() { $('.video2')[0].play(); }, 2000);
}
</script>
<script src="js/init.js"></script>
</body>
</html>
Thanks!
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