Calling Playkit-js player not showing in browser - javascript

After spending some 12 hours, I think I have successfully built playkit-js player (https://github.com/kaltura/playkit-js), and obtained a new folder "dist" and new "playkit.js".
There's a folder called "src" which also contains "playkit.js".
Can you kindly help me to call/configure the player and what would be the proper javascript code? As per their docs, I need add the following snippet:
<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
I can't make the player visible in the browser. Where should I add it, and also which "playkit.js" file should I use? I have tried both files but it's not working. Please help.
Here is the html I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#player-placeholder {
width: 640px;
height: 360px;
background-color: black;
}
</style>
<script src="playkit.js" type="text/javascript"></script>
</head>
<body>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
</body>
</html>

The play from API sometimes not working due to browser limitations (cant auto play with sound) if you'll add a button it will work.
check out this example:
<script src="https://github.com/kaltura/playkit-js/releases/download/v0.59.9/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<input type="button" onclick="play()" value="Play"/>
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {
sources:{
progressive:[{
mimetype:"video/mp4",
url:"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
}]
}
}
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
function play(){
player.play();
}
</script>
https://codepen.io/itaykinnrot/pen/LYVPGEx

Related

I was not able to see images while converting html page to pdf using javascript

here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764

Import JavaScript tag inside script in HTML

I am making a HTML5 widget for a SCADA.
The widget generates a custom_widget.js, witch I have modified to this.
// Subscribes to receive property changes
cwidget.on("Data", function() {
var Data = document.getElementsByName("Data")
var Data.scr = cwidget.Data;
});
The custom_widget.js is called in my HTML.
And I would like to use the Data tag inside a Script, in the HTML.
What is the syntax for importing the tag in the HTML?
From the technical manual for the SCADA program, I have this example.
HTML
<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
<script src="../Resources/Apis/Proxy.js" cwidget="MyWidget"></script>
<script src="./custom_widget.js"></script>
<title>MyWidget</title>
</head>
<body>
<iframe id="myFrame" style="width: 100vw; height: 100vh;"></iframe>
</body>
</html>
custom_widget.js
cwidget.on("URL", function() {
var myFrame = document.getElementById("myFrame");
myFrame.onload = cwidget.dispatchEvent("PageLoaded");
myFrame.src = cwidget.URL;
});

jsPDF generates empty pdf only

I am working with jsPDF to create a PDF from my HTML. However, it always generates an empty page doesn't matter which HTML content I enter as the source.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">Hello</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.getElementById("content"), {
callback: function(pdf) {
pdf.save("cv-a4.pdf");
}
});
});
</script>
</body>
</html>
What am I doing wrong? In my opinion that matches exactly the documentation. However, as stated above, the pdf generated does not show any content and not the "Hello". ( I took some of the code from this StackOverflow question)
#threxx
Try this code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">
<h1 style="color: brown;">Hello, He/She..</h1>
<p style="color: green;">How Are you ??</p>
Thank you.
</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = window.document.getElementById('content').innerHTML;
doc.fromHTML(source, 30, 30);
doc.save("cv-a4.pdf");
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.
So after doing some more research I found this answer which will return a PDF from the HTML. Small problem: still only very poor CSS styles but afaik jspdf doesn't support custom CSS.
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = document.body;
var margin = {
top: 20,
left: 20,
right: 20,
bottom: 20
};
doc.fromHTML(source, 30, 30, {
'width': 80, // max width of content on PDF
},
function(pdf){doc.save('saveInCallback.pdf');},
margin
);
});
</script>

How to dynamically create a mediaelement player using jquery and mediaelement-and-player.js?

I am trying to create a video element using the 'media-element-and-player' which is a plugin for creating a custom video player.
It is working fine when i create the element myself but it doesn't work when the video element is dynamically created by JQuery.
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source
type="video/mp4" src="batman.mp4"></video>';
div.append(video);
</script>
</body>
</html>
How to achieve this?
And thanks in advance!
This should do the trick:
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Add any other renderers you need; see Use Renderers for more information -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source type="video/mp4" src="batman.mp4"></video>';
div.append(video);
// After adding dynamically new video element, you should initialize the mediaelement plugin on that node as when the page loads this isn't rendered
$('.video-preview video').mediaelementplayer({
pluginPath: "/path/to/shims/",
success: function(mediaElement, originalNode, instance) {
// do things
}
});
</script>
</body>
</html>

Javascript: How to check if button's click function is assigned

I know this question has been asked, but this is different from that question. I am trying to solve it with mere Javascript.
The problem relates to my backbone.js application, which I've brought down to the simplest form, yet can't get events to work. Any suggestion would be most appreciated.
My code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Learning About Backbone.js Views</title>
<style type="text/css">
#container { padding:20px; border:1px solid #333; width:400px; }
#list-template { display:none; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type='text/javascript'>
var ListView=Backbone.View.extend({
initialize:function(){
console.log('initialized');
},
el:'body',
events:{
'click #add':'time',
'click':'whatApp'
},
time: function()
{
console.log('hooooooop');
},
whatApp:function()
{
console.log('Coool');
}
});
var listView = new ListView();
</script>
</head>
<body>
<button id='add'>Add list item</button>
</body>
</html>
Nothing wrong with what you are doing.
You are trying to initialize the view before the body (or the dom) is there.
You should initialize the view after the dom is loaded:
$(function(){
var listView = new ListView();
});
With jQuery, you should be able to use the Data API to view events and assigned functions:
$('#add').data('events')

Categories

Resources