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
Related
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'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
I am developing a simple application in XDK IBM to run a video in a android device.
The problem is, after built, the video dont autoplay and dont do the loop.
The code:
<!DOCTYPE html>
<html>
<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
#-ms-viewport { width: 100vw ; zoom: 100% ; } #viewport { width: 100vw ; zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; } #viewport { user-zoom: fixed ; }
</style>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<video width="100%" height="100%" autoplay="true" loop="true">
<source src="assets/1234.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' id="src" autostart="true">
</video>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
</body>
</html>
I afraid this problem seem to be a XDK issue. In the debug it works as expected. I tested the APk in 2 smartphones and in the MK808.
Regards,
This was the solution:
<video width="100%" height="100%" id="video">
<source src="assets/12345.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' id="src" autostart="true">
</video>
<script type="text/javascript">
var video = document.getElementById("video");
video.loop = false;
video.addEventListener('ended', function() { video.currentTime=0.1; video.play(); }, false);
video.play();
</script>
I've written such code in my _Layout.cshtml:
<head>
<link href="#Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.fancybox-1.3.4.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("H");
$('#gallery a').fancybox({
});
}); // end ready
</script>
</head>
<body>
<div id="gallery" >
<a href="../../Content/Images/Slide1.JPG" rel="gallery" title="Img1!:)">
<img alt="Dog" height="170" src="../../Content/Images/Slide1_s.JPG" width="200" /></a>
<a href="../../Content/Images/Slide2.JPG" rel="gallery" title="Img2!:)">
<img alt="Cat" height="170" src="../../Content/Images/Slide2_s.JPG" width="200" /></a>
</div>
</body>
I've used above code in simple html file and it works perfectly. However, if I try to put this code in MVC 4, it does not work. Just links of images work and it shows just image without "new pop-up window". I checked a lot of times all addresses of ".js" libraries and putted "alert('Hello from .js')" to check availability from "Scripts" folder of these libraries.
What's the reason of that? How to resolve it?
I just moved "#Scripts.Render("~/bundles/jquery")" and "#RenderSection("scripts", required: false)" from to and it works perfectly!
The whole code is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<link href="~/Icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
When I start my application, the dojo start loading but are not yet fully parsed and thus screen looks ugly!!!
Is there a way to hide this ugly screen until it is fully loaded a parsed?
Thanks
Dominique
EDIT ADD SNIPPET
I heard that WL Studio would hide automatically the body and thus no need to create an overlay.
Here my html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Test.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script type="text/javascript"
data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false"
src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="main" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top"'>Main Screen</div>
<button id="refreshBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Refresh</button>
<button id="settingsBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Setting</button>
</div>
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
and my js
function wlCommonInit(){
require([ "dojo/core-web-layer", "dojo/mobile-ui-layer",
"dojo/mobile-compat-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo", "dojo/parser", "dojox/mobile", "dojox/mobile/compat",
"dojox/mobile/deviceTheme", "dojox/mobile/Heading", "dojox/mobile/Button" ],
function(dojo) {
dojo.ready(function() {
});
});
}
I tried also to add hidden="hidden" in the but it doesn't change anything.
Any idea?
Yes there is,
you need to build a loading overlay. Check out this tutorial:
http://dojotoolkit.org/documentation/tutorials/1.6/recipes/loading_overlay/
What I normally did with this is:
<div id="main" style="visibility: hidden;"></div>
After the parsing is complete:
set the main visibility to visible again.
Might not fully solve the problem (depends on how fast the browser able to resolve the layout), but you won't be getting plain html displayed until it is:converted into widget.
Further reference:
dojo/Ready = to detect when the page is parsed.