Created
February 2, 2017 16:38
-
-
Save herdianf/41cbb9b74f5b84305d04e15336cc7315 to your computer and use it in GitHub Desktop.
Carousel Video HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>test carousel vid</title> | |
| </head> | |
| <body> | |
| <style> | |
| /* masukkan di style.css */ | |
| .module.type-slide .video-slider .type-item .info , .video-slider { max-height:600px; height:540px; } | |
| .image .anim-image { height:100%; } | |
| .video-slider .image video { height:100%; width:auto; margin: auto; } | |
| </style> | |
| <!-- contoh carousel video --> | |
| <div class="module type-slide"> | |
| <div class="content video-slider"> | |
| <div class="wrapper"> | |
| <div class="slider"> | |
| <!-- contoh External Content --> | |
| <div class="type-item"> | |
| <div class="image"> | |
| <video preload="true" loop="loop" muted data-poster="/vizpro/images/mov-2.png" autoplay="true" playsinline="true"> | |
| <source src="/vizpro/images/mov-1.mp4" type="video/mp4"> | |
| <video> | |
| <img class="anim-image" data-src="/vizpro/images/mov-1.gif"/> | |
| </div> | |
| <div class="info"> | |
| <div class="container"> | |
| <h1>{title}</h1> | |
| <p>{teaser}</p> | |
| <a href="{link}" class="action">{teasertitle}</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- contoh embed iframe / cmhtml / mcvideo --> | |
| <div class="type-item"> | |
| <div class="embed-container"> | |
| <iframe src="http://player.ooyala.com/static/v4/stable/latest/skin-plugin/iframe.html?ec=13ZjJleTr11Cf8Hf9ykiVfhEP5OkSjDV&pbid=f9627053a04f4ddb8452649fbdd90c2&pcode=ZNeqR&options[autoplay]=false&options[platform]=html5" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <!-- contoh embed iframe / cmhtml / mcvideo --> | |
| <div class="type-item"> | |
| <div class="embed-container"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/PnndG1S9us4" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- perubahan fungsi moduleSlider() di site.js --> | |
| <script> | |
| window.mobileAndTabletcheck = function() { | |
| var check = false; | |
| (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); | |
| return check; | |
| }; | |
| function moduleSlider() { | |
| var initCarousel = function(event) { | |
| var slider = $(event.target); | |
| //for mobile, remove video element and show anim image | |
| if ( mobileAndTabletcheck() ) { | |
| $(slider).find(".type-item.slick-slide video").remove(); | |
| $(slider).find(".type-item.slick-slide img.anim-image").each(function() { | |
| var image=$(this), | |
| src=image.data('src'); | |
| if (src) { | |
| image.prop('src', src); | |
| image.data('src', ''); | |
| } | |
| }) | |
| } else { | |
| $(slider).find(".type-item.slick-slide img.anim-image").remove() | |
| $(slider).find(".type-item.slick-slide video").each(function(){ | |
| var video=$(this); | |
| //using background image instead of poster | |
| var poster = video.data('poster') | |
| if (poster) { | |
| video.data('poster','') | |
| video.css({'background-image': 'url('+poster+')', 'background-repeat':'no-repeat', 'background-size':'cover'}) | |
| } | |
| }) | |
| } | |
| } | |
| var playVideo = function(event){ | |
| var slider = $(event.target); | |
| $(slider).find(".type-item.slick-slide.slick-active video").each(function() { | |
| var video=$(this)[0]; | |
| setTimeout(function() { video.play() }, 500) | |
| }); | |
| }; | |
| $(".slider") | |
| .on('init', function(ev) {initCarousel(ev); playVideo(ev);}) | |
| .slick({ | |
| dots: true, | |
| arrows: true, | |
| slidesToShow: 1, | |
| slidesToScroll: 1, | |
| // autoplay: true, | |
| autoplaySpeed: 6000, | |
| fade: false, | |
| adaptiveHeight: true, | |
| respondTo: "slider", | |
| asNavFor: ".slider-nav" | |
| }).on('beforeChange', function(event){ | |
| //before slide, pause the current video | |
| var slider = $(event.target); | |
| $(slider).find(".type-item.slick-slide.slick-active video").each(function() { | |
| var video=$(this)[0]; | |
| setTimeout(function() { video.pause() }, 500) | |
| }); | |
| }).on('afterChange', playVideo); | |
| $(".slider-nav").slick({ | |
| dots: false, | |
| slidesToShow: 3, | |
| slidesToScroll: 1, | |
| focusOnSelect: true, | |
| respondTo: "slider", | |
| asNavFor: ".slider" | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
menarik