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>
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 am trying to make web application and i need to add an icon to my title bar with a name.
I am making the web application using empty project in MVC with web form included. I am doing the coding using Visual studio 2017. I have tried my layout as below so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/nav.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
<script src="~/Scripts/layout.js"></script>
<title>#ViewBag.Title</title>
</head>
<body>
<navbar>
<div class="topnav" id="myTopnav">
Home
Login
Payment
Customer Registration
<a href="javascript:void(0);" class="icon" onclick="myfunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
#RenderBody()
</div>
</navbar>
</body>
</html>
I have tried to link the image before title but it took a wrong turn. Since I am new to MVC, please give me some method to add an icon to title bar.
What you are looking for is called a favicon. You can generate it from png or whatever and then include it in your page like this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Here's a favicon generator (one of many):
https://www.favicon-generator.org/
The problem lays in this code:
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
You are specifying that the type is image/svg while instead it is a image/png.
Be sure that a png image exists in Content/img folder.
I have a scenario, i have to play two video in HTML5 player in mobile browsers. The videos are playing fine in desktop browsers.
one thing i know ,
We not autoplay videos in mobile browsers, user has to tap on the video player to play video.
What i am doing, on video ended event of first video i am changing the src of the . but sometimes it is shaky or it does not plays the second video. user has to tap on play button to play 2nd video. I just need to exclude the 2nd tap. YouTube is doing this somehow. The ad video plays fine, the player minimize and then the 2nd video starts playing.
It takes much time to play the video on start.
Following is my sample implementation. try this url in iPhone or Android
http://abuzer.github.io/videojs-liverail-vpaid/sample.html
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
video1 = 'https://d3hh3bpy3h68fd.cloudfront.net/processed_videos/47fad7e0-7477-0132-8e95-123139254ded/_preview_640x480_2932_edit.mp4';
video2 = 'https://drgta5lwz3cck.cloudfront.net/uploads-public-videos/fd6eefe0-73cc-0132-a03a-12313b07582a/640x480.mp4';
video1Played = false;
video2Played = false;
$(function() {
$('#playAd').on('click', function() {
$('#playAd').hide();
$('#videoElement').attr('src', video1);
$('#videoSource').attr('src', video1);
$('#videoElement')[0].play();
video1Played = true;
});
$('#videoElement').bind('ended', function() {
if (video1Played && !video2Played) {
$('#videoElement').attr('src', video2);
$('#videoSource').attr('src', video2);
$('#videoElement')[0].load();
$('#videoElement')[0].play();
video2Played = true;
}
});
$('.videoElement').bind('progress', function(e) {
$('#state').hide();
});
$('.videoElement').bind('waiting', function(e) {
$('#state').show();
});
});
</script>
<html>
<head>
<meta charset="utf-8">
<title></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 -->
</head>
<body>
<button type="button" id="playAd">Click to Play</button>
<div id="videoWrapper" style="">
<div id="state" style="display:none; text-align: center">
<img style="-webkit-user-select: none" src="http://www.loadinfo.net/images/preview/14_cyrle_four_24.gif?1384388177">
</div>
<video x-webkit-airplay="allow" id="videoElement" class="video-js videoElement vjs-default-skin" height="50%" width="100%" controls src="" poster="">
<source id="videoSource" src="" type="video/mp4">
</video>
<!-- <video data-setup="{}" x-webkit-airplay="allow" id="videoElement1" class="video-js videoElement1 vjs-default-skin" height="50%" width="100%" controls src="" poster="">
<source id="videoSource" src="https://d3hh3bpy3h68fd.cloudfront.net/processed_videos/47fad7e0-7477-0132-8e95-123139254ded/_preview_640x480_2932_edit.mp4" type="video/mp4">
</video>
-->
</div>
</body>
</html>
I created a simple dojomobile app in worklight 6.1. I have the mobile test workbench installed in the same eclipse env as worklight. The code below is the dojo code for the hybrid app's index.html. It is a very basic dojo mobile app using default header information from worklight.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</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/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Heading'"></div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Category</h2>
<div data-dojo-type="dojox.mobile.RoundRect">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
</div>
</div>
<button data-dojo-type="dojox.mobile.Button">Button1</button>
<button data-dojo-type="dojox.mobile.Button">Button2</button>
<button data-dojo-type="dojox.mobile.Button">Button3</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The problem when I register the app in the test workbench and record a test on my android device (Samsung s4). The test app does not recognize it is running dojo. The display of the app on the device is missing the header line. The test contents from from the recorded steps say that I clicked on JQuery Button and not dojox.mobile.Button.
Weird thing, when you go to replay the recorded test, the app displays properly (header and other dojo controls), and the script fails because it is looking for JQuery Button. I could go in and edit the script so that it is correct, but that is not what I want to do for every script that I record or rerecord because of app changes.
Please let me know what I'm doing wrong or is this a known problem.
Jquery is added by default into the worklight application. See the script tag with
<script>window.$ = window.jQuery = WLJQ;</script>
in your Html head tag. Remove it and try!
I have created a dojo based Worklight project and a hybrid application it.
I did a drag and drop of a dojo mobile button which gets added inside a dojo mobile view. All of this works fine and renders fine in the various environments (common, android etc.). It also correctly shows the look and feel in Rich Page Editor.
But then i added a script that has a very simple dojo.ready call. Now when i run this application i get a console error saying ReferenceError: dojo is not defined. Any idea why that is happening?
I know that i have correctly setup the dojo as other pieces seem to work. I have also checked that the dojo.js is loading (which is obvious as the other pieces are working). I am using IBM Worklight 6.0 developer edition with all capabilities installed.
Here is my sample code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jmdwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<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/jmdwl.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<script>
dojo.ready(function() {
alert("Here");
});
</script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<!--application UI goes here-->
<button data-dojo-type="dojox.mobile.Button">Label</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/jmdwl.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Thanks,
Gaurav
If you want to use dojo.ready you must initialize it first.
<script>
require(["dojo/ready"], function(ready){
ready(function() {
alert("Here");
});
});
Here's the reference : http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html#dojo-ready
Update 1
Which Version of dojo do you use by now? 1.6 or 1.7+ ?
The new AMD requires to initialize the modules like i write before.
Have you read this threads? There seem to be an failure while importing the dojo Libarys. I guess this could have something to do with your error.
worklight fail to require DOJO Combobx on real device -fail to load ... /dijit/form/nls/it/ComboBox.js
and
Worklight core-web-layer.js errors
Regards, Miriam