1

I like playlist http://codepen.io/dudleystorey/pen/vnedg

want include playlist to homepage - Who add please tell me. thank you.

<figure id="video_player">
  <div id="video_container">
  <video controls poster="http://demosthenes.info/assets/images/vid-glacier.jpg">
    <source src="http://demosthenes.info/assets/videos/glacier.mp4" type="video/mp4">
    <source src="http://demosthenes.info/assets/videos/glacier.webm" type="video/webm">
</video>
</div>
<figcaption>
  <a href="http://demosthenes.info/assets/videos/glacier.mp4" class="currentvid">
    <img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
  </a>
  <a href="http://demosthenes.info/assets/videos/lake.mp4">
    <img src="http://demosthenes.info/assets/images/vid-lake.jpg" alt="Athabasca Lake">
  </a>
  <a href="http://demosthenes.info/assets/videos/mountain.mp4">
    <img src="http://demosthenes.info/assets/images/vid-mountain.jpg" alt="Mountain">
  </a>
</figcaption>
</figure>

To Css: styles.css

  body { background: #222; }
    #video_player { 
      display: table; line-height: 0;
      font-size: 0; background: #000;
      max-width: 1000px;
      margin: 0 auto;
    }
    #video_container { 
      position: relative;
    }
    #video_player div, #video_player figcaption { 
      display: table-cell;
      vertical-align: top; 
    }
    #video_container video { 
      position: absolute; 
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
    }
    #video_player figcaption { width: 25%; }
    #video_player figcaption a { display: block; }
    #video_player figcaption a { 
      opacity: .5;
      transition: 1s opacity; 
    }
    #video_player figcaption a img, figure video { 
      width: 100%; height: auto; 
    }
    #video_player figcaption a.currentvid, #video_player figcaption a:hover, #video_player figcaption a:focus { opacity: 1; }
    @media (max-width: 700px) {
      #video_player video, #video_player figcaption { 
        display: table-row; 
      }
    #video_container { padding-top: 56.25%; }
    #video_player figcaption a { 
      display: inline-block; width: 33.33%; 
    }
    }

JS Code

var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
video_links = video_player.getElementsByTagName("figcaption")[0],
source = video.getElementsByTagName("source"),
link_list = [],
vidDir = "http://demosthenes.info/assets/videos/",
currentVid = 0,
allLnks = video_links.children,
lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");

(function() {
function playVid(index) {
 video_links.children[index].classList.add("currentvid");
    source[1].src = vidDir + link_list[index] + ".webm";  
    source[0].src = vidDir + link_list[index] + ".mp4";
    currentVid = index;
    video.load();
    video.play();
}

for (var i=0; i<lnkNum; i++) {
var filename = allLnks[i].href;
link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
(function(index){
        allLnks[i].onclick = function(i){
        i.preventDefault();  
        for (var i=0; i<lnkNum; i++) {
        allLnks[i].classList.remove("currentvid");
        }
        playVid(index);
        }    
    })(i);
}
video.addEventListener('ended', function () {
    allLnks[currentVid].classList.remove("currentvid");
    if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
    playVid(nextVid);
})

video.addEventListener('mouseenter', function() {
    video.setAttribute("controls","true");
})

video.addEventListener('mouseleave', function() {
    video.removeAttribute("controls");
})

var indexOf = function(needle) {
    if(typeof Array.prototype.indexOf === 'function') {
        indexOf = Array.prototype.indexOf;
    } else {
        indexOf = function(needle) {
            var i = -1, index = -1;
            for(i = 0; i < this.length; i++) {
                if(this[i] === needle) {
                    index = i;
                    break;
                }}
            return index;
        };}
    return indexOf.call(this, needle);
};
    var focusedLink = document.activeElement;
    index = indexOf.call(allLnks, focusedLink);

document.addEventListener('keydown', function(e) {
if (index) {
    var focusedElement = document.activeElement;
    if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
    var nextNode = focusedElement.nextElementSibling;
    if (nextNode) { nextNode.focus(); } else { video_links.firstElementChild.focus(); }
    }
   if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
    var previousNode = focusedElement.previousElementSibling;
    if (previousNode) { previousNode.focus(); } else { video_links.lastElementChild.focus(); }
    }
 }
});

})();  
1

You can add this pieces of code in static block with identifier 'home' like a page

example:

piece of code html
<style>
piece of code css
</style>
<script type="text/javascript">
piece of code js
</script>

You have other alternatives to make more 'useful'

example:

  1. Insert your html piece code in block static with identifier 'home'

  2. Add your css piece code in style.css in your skin/package/theme/css/style.css

  3. Add your js piece code in any_name.js in your skin/package/theme/js/any_name.js

    In the cms home page there is Design(Layout Update XML) use the following code in that:

<reference name="head">
  <action method="addItem"><type>skin_js</type><name>js/any_name.js</name></action>
</reference>
  • I tried your method.. video show but video.js not load . I add code to cms.xml – Ayhan Ergezen Jul 16 '15 at 0:28
  • Go to block static and click in Design (layout update xml) and put the code referenced, please. Clean cache. – osrecio Jul 16 '15 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.