I've been trying to make this videoJS HLS work. It works perfectly when I do it in localhost but when I upload it to the server it gives me "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video."
Here's the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
<script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>
</head>
<body>
<h1>Video</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type='application/x-mpegURL'>
</video>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
Can anyone tell me if I need to do something with the server to make this work? Thanks
Try to verify if your server has CORS activated.
Go to videojs cors documentation: https://github.com/videojs/videojs-contrib-hls
and here for test:
http://client.cors-api.appspot.com/client
Related
I'm trying set up Vasts in Videojs but can't make it work!
My code looks like that.
What i make wrong?
The player works but does not display ads.
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
<!-- videojs-vast-vpaid -->
<link href="https://cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs.vast.vpaid.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs_5.vast.vpaid.min.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
</head>
<body>
<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls=""
data-setup='fluid:true {
"plugins": {
"vastClient": {
"adTagUrl": "MY VAST TAG",
"adsCancelTimeout": 3000,
"adsEnabled": true,
"preferredTech":"html5",
"vpaidFlashLoaderPath": "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true"
}
}}'
poster="="
preload="auto"
width='593'
height='364'
>
<source src="/cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" type="video/mp4">
</video>
</body>
The value of your data-setup is not a valid JSON string, so the plugin would not be initialised. That said the Mailonline plugin has not been updated in many years and is unlikely to work with modern Video.js versions. You might have a better experience using something more up to date - e.g. https://github.com/googleads/videojs-ima
I have built a livestream server for our church that is pushing the live feed to a video-js player on a page which I can then embed in our main website. This is working fine except I would like the stream to start playing automatically once it goes live (so if people are sitting on our site waiting for the live stream, they don't have to keep refreshing to get it to start playing).
I have seen mention of writing into the code for the player to keep querying the server every so many seconds and then start automatically, but I'm unsure how this gets written into the page.
Current code for live.html:
<!DOCTYPE html> <html> <head> <script src='https://bacstream.live/videojs/video.js'></script>
<script
src="https://bacstream.live/videojs/videojs-http-streaming.js"></script> <meta charset=utf-8 />
<title>LiveStream</title> <link href="https://bacstream.live/videojs/video-js.min.css"
rel="stylesheet"> <!-- <link
href="https://bacstream.live/videojs/videojs-sublime-skin.min.css" rel="stylesheet"> --> <!--
<link
href="https://bacstream.live/videojs/videojs-sublime-skin.css" rel="stylesheet"> --> <!-- <link
href="https://bacstream.live/videojs/video-js.css" rel="stylesheet"> --> <!-- <link
href="https://bacstream.live/videojs/videojs-skin-twitchy.css" rel="stylesheet" type="text/css">
--> </head> <body>
<center> <video-js id="live_stream" class="video-js vjs-fluid vjs-default-skin vjs-big-play-
centered" controls
autoplay preload="auto" autoplay="true" width="auto" height="auto" poster="https://thechurchco-
production.s3.amazonaws.com/uploads/sites/2101/2020/06/Static-stream-page.png"> <source
src="https://bacstream.live/live/stream/index.m3u8" type="application/x-mpegURL">
<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-js>
<script>
var player = videojs('live_stream', {errorDisplay: false});
player.play();
</script> </center> </body> </html>
I wrote code to insert subtitles in the video
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>name</title>
<link rel = "stylesheet" href = "skript/video-js.min.css" />
<script src = "skript/video.min.js"> </script>
</head>
<body>
<video
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{}'>
<source src="1.mp4" type="video/mp4">
<track label="rus" kind="subtitles" srclang="ru" src="sub/rus.vtt"/>
<track label="eng" kind="subtitles" srclang="en" src="sub/eng.vtt"/>
</video>
</body>
</html>
But it does not work with browsers Opera, Chrome
Is there any way to fix this?
Did you try to embed vtt/subtitles files in m3u8 package? It works with all browsers.
I'm trying to follow the GettingStarted instructions on https://github.com/googleads/videojs-ima to setup videojs with ima. But, am getting stuck on the part "In player.js, load the ads library"; nothing has been changed in the local player.js file so it still looks exactly the same as here https://github.com/videojs/video.js/blob/master/src/js/player.js.
Bellow is the current code I have, but when it's ran in IE11, the console reports a warning and two errors:
Warning: "VIDEOJS: WARN: videojs.plugin() is deprecated; use videojs.registerPlugin() instead" in video.js (489,5)
Error: "SCRIPT1002: Syntax error" in player.js (5,1)
Error: "CSS3120: No fonts available for #font-face rule" in video-js.css (12,7)
Any input very much appreciated.
Thank you.
<!DOCTYPE html>
<html>
<head>
<!-- Load dependent stylesheets. -->
<link rel="stylesheet" href="http://vjs.zencdn.net/6.2.0/video-js.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.css" />
</head>
<body>
<video id="content_video" class="video-js vjs-default-skin"
controls preload="auto" width="440" height="260">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
<!-- Load dependent scripts -->
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.js"></script>
<script src="src/js/player.js"></script>
<script>
var player = videojs('content_video');
var options = {
id: 'content_video',
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=440x260&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='
};
// This must be called before player.play() below.
player.ima(options);
player.ima.requestAds();
// On mobile devices, you must call initializeAdDisplayContainer as the result
// of a user action (e.g. button click). If you do not make this call, the SDK
// will make it for you, but not as the result of a user action. For more info
// see our examples, all of which are set up to work on mobile devices.
// player.ima.initializeAdDisplayContainer();
// This must be called after player.ima(...) above.
player.play();
</script>
</body>
</html>
HTML5 Video tag fallback is not working for me. Embed tag without Video tag works fine.
Below code doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<video width="549" height="309" controls autoplay>
<source src="small.3gp" type="video/3gpp">
<div>
No Movie
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</div>
</video>
</body>
</html>
Below code works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</body>
</html>
I need to create a video player which can run any kind of video file and fallback to quick time if its not supported by native. Mp4 format works fine as its supported in native browser (Chrome , IE and FF also as decoder is already there).
I am testing fallback for other than Mp4. like 3gp in this case.
I have seen code examples of Video for everybody, videojs, diveintohtml5/video, but not able to execute the the above code.
Any help would be appreciated.