Insert a popcorn.js video in a page

  • Hi,
    I want to add a video to a page, and I’m using popcorn.js. I have the code and it runs well outside the wordpress installation. You can see it here

    On the other hand, when I put the same code in a page it doesn’t work. You can see it here.

    The full code I’m using is this: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {

// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var $pop = Popcorn("#ourvideo");

// add a footnote at 2 seconds, and remove it at 6 seconds

$pop.exec(5,function(){
this.pause(5);

});

// play the video right away
$pop.play();

}, false);

document.pruebar("DOMContentLoaded", function () {

// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var $pop = Popcorn("#ourvideo");

// add a footnote at 2 seconds, and remove it at 6 seconds

$pop.exec(3,function(){
this.play(3);
});

// play the video right away
$pop.play();

}, false);

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,td,th {
	font-size: 12px;
}
body {
	background-color: #000;
}
</style>
</head>
<body>
<div id="footnotediv">
</div>
<div id="videodiv">
<video height="540" width="960" id="ourvideo">
<source src="bienvenida.mp4">
<source src="bienvenida.ogv">
<source src="bienvenida.webm">
</video>

</div>
<br>
<p><font color="white"><a href="javascript:void(0)" onclick="$pop.play();">pppp</a></font></P>
</body>
</html>

    I load the javascript code with a plugin and it loads correctly.

    If anybody knows how to follow, it will really help me. It’s my first time with this kind of work and it’s for a non-profit artist work. So, I will be really pleased if you can help me.

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Insert a popcorn.js video in a page’ is closed to new replies.