I want to use 2 players synchronously. When I trigger the play in one, both run together!
Is there any way to when the User move the video forward or there is some buffer in a video, both videos still together?
Absolutely. Here is some quick basic example code that uses our JavaScript API to do this. Note, this uses 6.12 and uses HTML5, but the same should work with Flash/RTMP/JW7. This uses our JavaScript API - http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference
Code:
<!DOCTYPE html>
<html>
<head>
<title>Sync</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div id="player1"></div>
<br />
<div id="player2"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
});
jwplayer("player2").setup({
file: "http://content.bitsontherun.com/videos/bkaovAYt-364766.mp4",
});
jwplayer("player1").onBeforePlay(function(){
jwplayer("player2").play();
});
jwplayer("player2").onBeforePlay(function() {
jwplayer("player1").play();
});
jwplayer("player1").onPause(function(){
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
});
jwplayer("player2").onPause(function(){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
});
jwplayer("player1").onSeek(function(e){
jwplayer("player2").seek(e.offset);
});
jwplayer("player2").onSeek(function(e){
jwplayer("player1").seek(e.offset);
});
</script>
</body>
</html>
Update, here is an example of this working with one set of controls for both players:
<!DOCTYPE html>
<html>
<head>
<title>Sync</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div style="float:left;"><div id="player1"></div></div>
<div style="float:right;"><div id="player2"></div></div>
Play/Pause |
Stop |
Seek Back |
Seek Ahead
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
controls:false
});
jwplayer("player2").setup({
file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
controls:false
});
</script>
</body>
</html>
Related
I saw this code sinppet in the SAP documantion:
https://help.sap.com/saphelp_nw74/helpdata/en/91/f1454b6f4d1014b6dd926db0e91070/content.htm
I tried to use it in this simple example below.
what I get is this error message in the console:
Uncaught TypeError: sap.ui.core.plugin.DeclarativeSupport.compile is not a function
how do I solve it?
<!Doctype HTML>
<html>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-modules='sap.ui.core.plugin.DeclarativeSupport'
>
</script>
<script>
function addButton(){
console.log('addButton');
$("body").append('<div id="button"><div data-sap-ui-type="sap.ui.commons.Button" data-text="This button is added dynamically"></div></div>');
sap.ui.core.plugin.DeclarativeSupport.compile(document.getElementById("button"));
}
setTimeout(addButton,10);
</script>
</head>
</html>
Should work this way:
<!Doctype HTML>
<html>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport">
</script>
<script>
sap.ui.getCore().attachInit(function () {
$("body").append('<div id="button"><div data-sap-ui-type="sap.ui.commons.Button" data-text="This button is added dynamically"></div></div>');
sap.ui.core.DeclarativeSupport.compile(document.getElementById("button"));
});
</script>
</head>
</html>
Live example: https://jsbin.com/gegubuzuni/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
I am working on omniture site catalyst variables to be placed for video tracking for a client. My problem is when we click on jwplayer play button i want to throw a alert message. Can anybody please advise me how to do this one.
Here is a quick sample!
<html>
<head>
<title>Test Page</title>
</head>
<body>
<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
<div id="player"></div>
<script type="text/javascript">
jwplayer("player").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
flashplayer: "http://player.longtailvideo.com/player.swf",
height: 300,
width: 465,
events:{
onPlay: function(event) {
alert('Playing!');
}
}
});
</script>
</body>
</html>
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>
This example works, but if i create local file like this:
<script src="jquery-big.js"></script>
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
<script>
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
</script>
(removed all utf-8 bug-symbols from jsfiddle) - nothing works, and no errors in console. checked in Google Chrome 19.0.1084.46.
try like this~
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>question</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//document ready script here
$(document).ready(function() {
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
});
</script>
</head>
<body>
<!-- element below-->
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
</body>
</html>