Player video HTML5 con lista XML
Ecco un video player in HTML 5 che legge da un file XML esterno.
E’ facile da configurare, basta agire sul file XML per aggiungere o togliere video dalla lista.
Per ogni item nel file XML si possono aggiungere un titolo, una descrizione ed i percorsi dei files video ( formati mp4 e ogg ).
Inoltre, nel file XML possiamo configurare le dimensioni del video.
Ecco i passi dello sviluppo
HTML5
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
<title>HTML 5 Video Player</title>
</head>
<body onLoad="init()">
<section>
<header>
<h3>HTML 5 Video Player with playlist | example by FlepStudio</h3>
</header>
<div id="wrapper">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
<div id='mycustomscroll'>
</div>
</div>
<div id="description">
</div>
</div>
<footer>
</footer>
</section>
</body>
</html>
CSS
body
{
font-family: 'Droid Sans', 'Arial', sans-serif;
color: #6F7986;
font-size: 14px;
}
header
{
text-align: center;
}
footer
{
}
select
{
width: 240px;
}
#wrapper
{
margin: 0 auto;
width: 1168px;
}
#leftcolumn
{
color: #333;
border: 1px solid #ccc;
background-color: #F2F2E6;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 368px;
width: 848px;
float: left;
}
#description
{
color: #333;
border: 1px solid #ccc;
background-color: #F2F2E6;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 100%;
width: 848px;
float: left;
}
#rightcolumn
{
display: inline;
position: relative;
float: right;
color: #666;
border: 1px solid #ccc;
background-color: #F2F2E6;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 368px;
width: 265px;
}
#mycustomscroll
{
list-style: none;
height: 348px;
overflow: auto;
position: relative;
background-color: #F2F2E6;
margin: 0.3em auto;
font-size: 12px;
}
#mycustomscroll li
{
font-size: 12px;
width: 230px;
background-color: #333;
color: #CCC;
padding: 5px;
margin: 10px;
cursor: pointer;
}
#mycustomscroll a
{
text-decoration: none;
}
#mycustomscroll a:hover li
{
background-color: #6F7986;
color: #FFF;
}
Javascript
// properties
var XML_PATH = "xml/config.xml";
var video_width;
var video_height;
var videos_array=new Array();
// init the application
function init()
{
// call loadXML function
loadXML();
}
// XML loading
function loadXML()
{
$.ajax({
type: "GET",
url: XML_PATH,
dataType: "xml",
success: function onXMLloaded(xml)
{
// set video_width and video_height
video_width=$(xml).find("videos").attr("width");
video_height=$(xml).find("videos").attr("height");
// loop for each item
$(xml).find('item').each(function loopingItems(value)
{
// create an object
var obj={title:$(this).find("title").text(), mp4:$(this).find("mp4").text(), ogg:$(this).find("ogg").text(), description:$(this).find("description").text()};
videos_array.push(obj);
// append <ul> and video title
$("#mycustomscroll").append('<ul>');
$("#mycustomscroll").append('<a><li id="item"><strong>'+(value+1)+"</strong><br/><strong>Title: </strong>"+obj.title+'</li></a>');
});
// close </ul>
$("#mycustomscroll").append('</ul>');
// append video tag player
$("#leftcolumn").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[0].mp4+'" type="video/mp4" /><source src="'+videos_array[0].ogg+'" type="video/ogg" />Your browser does not support the video tag.</video>');
// append description
$("#description").append(videos_array[0].description);
// call addListeners function
addListeners();
}
});
}
// add <li> listener
function addListeners()
{
// loop for each list item
$('#mycustomscroll li').each(function looping(index)
{
// onclick...
$(this).click(function onItemClick()
{
// empty left column and description
$("#leftcolumn").empty();
$("#description").empty();
// append video tag
$("#leftcolumn").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[index].mp4+'" type="video/mp4" /><source src="'+videos_array[index].ogg+'" type="video/ogg" />Your browser does not support the video tag.</video>');
// append description
$("#description").append(videos_array[index].description);
});
});
}
XML
<?xml version="1.0" encoding="UTF-8"?>
<videos width="848" height="368">
<item>
<title>21 Jump Street</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/21_Jump_Street.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/21_Jump_Street.ogv</ogg>
<description><![CDATA[<strong>21 Jump Street</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Answers to Nothing</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Answers_to_Nothing.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Answers_to_Nothing.ogv</ogg>
<description><![CDATA[<strong>Answers to Nothing</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Being Flynn</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Being_Flynn.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Being_FlynnBeing_Flynn.ogv</ogg>
<description><![CDATA[<strong>Being Flynn</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Brave</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Brave.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Brave.ogv</ogg>
<description><![CDATA[<strong>Brave</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Footnote</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Footnote.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Footnote.ogv</ogg>
<description><![CDATA[<strong>Footnote</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Happy Feet Two</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Happy_Feet_Two.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Happy_Feet_Two.ogv</ogg>
<description><![CDATA[<strong>Happy Feet Two</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Heir Apparent Largo Winch</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Heir_Apparent_Largo_Winch.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Heir_Apparent_Largo_Winch.ogv</ogg>
<description><![CDATA[<strong>Heir Apparent Largo Winch</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Ice Age Continental Drift</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Ice_Age_Continental_Drift.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Ice_Age_Continental_Drift.ogv</ogg>
<description><![CDATA[<strong>Ice Age Continental Drift</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Mission Impossible Ghost Protocol</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Mission_Impossible_Ghost_Protocol.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Mission_Impossible_Ghost_Protocol.ogv</ogg>
<description><![CDATA[<strong>Mission Impossible Ghost Protocol</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>My Week With Marilyn</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/My_Week_With_Marilyn.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/My_Week_With_Marilyn.ogv</ogg>
<description><![CDATA[<strong>My Week With Marilyn</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>rampart</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/rampart.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/rampart.ogv</ogg>
<description><![CDATA[<strong>rampart</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>Shame</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Shame.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Shame.ogv</ogg>
<description><![CDATA[<strong>Shame</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>The Descendants</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/The_Descendants.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/The_Descendants.ogv</ogg>
<description><![CDATA[<strong>The Descendants</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
<item>
<title>The Hunger Games</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/The_Hunger_Games.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/The_Hunger_Games.ogv</ogg>
<description><![CDATA[<strong>The Hunger Games</strong> Lorem ipsum dolor sit amet, consectetuer <a href="http://css.flepstudio.org/"><font color="#FF0033"><strong> hiperlinks</strong></font></a>. Morbi a lorem quis sapien tincidunt adipiscing. Proin vel sapien. Vestibulum a orci. Sed fringilla accumsan nisl. Duis feugiat sem non ligula.]]></description>
</item>
</videos>
Files sorgente:
HTML5 Video Player (6.6 KiB, 688 hits)
a>
About The Author
Number of Entries :
85
