Nhúng JWPlayer để chạy video vào website (Blog)

code

Thích Code | July 06, 2016 | Edit Post

Thấy có nhiều bạn muốn làm website chạy Video,nhưng vì lý do nào đó mà nhúng không được. Hôm nay mình viết bài viết này để hướng dẫn các bạn cách nhúng JWPlayer vào Website (Blog).

Thấy có nhiều bạn muốn làm website chạy Video,nhưng vì lý do nào đó mà nhúng không được. Hôm nay mình viết bài viết này để hướng dẫn các bạn cách nhúng JWPlayer vào Website (Blog).

Nhúng JWPlayer để chạy video vào website (Blog)

Chú ý: Nếu bạn muốn thay đổi skin cho Player thì bạn phải up file [skin].xml lên cùng host thì Player mới chạy được. Trong bài viết, do mình dùng blogspot nên dùng skin mặc định của JWPlayer.

DEMO - DOWNLOAD

Mẹo: Copy tất cả code trong ví dụ và dán vào  Test Javascript Online để demo nhanh.

Cách tìm file [skin].xml :
- Bạn vào http://jwplayerskins.com/ (Chọn skin mình thích) --> View Source. Sau đó, bạn tìm *.xml thì file này chính là skin bạn đang xem, bạn chỉ cần download file này về và up lên host. Sau đó thay đổi đường dẫn file [skin].xml trong đoạn code Javascript thì Player sẽ thay đổi skin. (xem hình bên dưới để biết cách làm)

HTML
CSS
JS
Code by ThichCode.NET

/*= Before Responsive
 *==================================================================*/

/*== Loop Actions */
.loop-actions .orderby-select{display:none;}

/*== Select Menu */
#main-nav .select-div{background:url(http://jwplayerskins.com/template/images/nav-sep.png) no-repeat left 0;display:none;}
#main-nav .select-wrap{overflow:hidden;
background-image: url(http://jwplayerskins.com/template/images/select-arrow.png);
background-repeat:no-repeat;
background-position:right center;
}
#main-nav select {height:auto; text-transform:none; display:block; margin:0 auto; 
-webkit-border-radius:0;
border-radius:0;
width:120%;
border:0;
font-size:13px;
font-weight:bold;
color: #EEE;
text-shadow:0 1px 0 #000;
padding:7px 5px 7px 10px;
-webkit-appearance: none; 
-moz-appearance: normal; 
appearance: normal;
-webkit-padding-end: 20px; 
-webkit-padding-start: 10px; 
-webkit-user-select: none;
-moz-user-select: none;
background-color:transparent;
background-color: rgba(0,0,0,0);
background-image: url(http://jwplayerskins.com/template/images/select-arrow.png);
background-repeat:no-repeat;
background-position:right center;
}
#main-nav select option {font-size:12px;color:#333;background:none;}
#main-nav select:active option{background:#FFF;}
.ie #main-nav select{color:#FFF;}
.ie #main-nav select option{background:none;color:#FFF;}
.ie #main-nav select:active option{background:none;color:#333;}

/*== Tablet Portrait
 *==================================================================*/
@media only screen and (min-width:640px) and (max-width:959px) {

/*== Structure */
body{min-width:640px;}
.boxed-wrap #page{width:640px;}
#main{padding:20px 0;}
.wrap{width:620px}
#content, #sidebar{width:100%;}

/*== Header */
#branding{margin-bottom:10px;}
#header-actions{margin-bottom:10px;}
#header-search{width:100%;margin-left:0;}

/*== Featured */
.home-featured .nav{width:620px;height:188px;float:left;background:#333;position:relative;}
.home-featured .nav .carousel{width:620px;height:160px;border-bottom:1px solid #444;}
.home-featured .nav .carousel-clip{height:320px;width:630px;}
.home-featured .nav .carousel-list{width:624px;}
.home-featured .nav li{float:left;width:309px;margin-left:0;
border-left:1px solid #444;
border-right:1px solid #272727;
}
.home-featured .nav li .inner{margin:0;}
.home-featured .nav li.current{background:#222;width:310px;border-left:0;}
.home-featured .nav li.current .inner{
 border-left:4px solid #B70000;
 margin-left:0;
 padding-left:6px;
}

.home-featured .nav .carousel-prev, 
.home-featured .nav .carousel-next{position:absolute;bottom:0px;}
.home-featured .nav .carousel-prev{left:0;margin:0;width:309px;border-left:1px solid #444;}
.home-featured .nav .carousel-next{right:0;width:308px;}

.home-featured-full .stage, 
.home-featured-full .stage .carousel{width:620px;height:349px;overflow:hidden;}
.home-featured-full .stage,
.home-featured-full .stage .carousel-list{height: 349px;}
.home-featured-full .stage .item,
.home-featured-full .stage .thumb {
width: 620px;
height: 349px;
}
.home-featured-full .stage .thumb img{width:620px;}

.fcarousel-5 .carousel-clip{width:544px;}
.fcarousel-5 li {
margin: 5px 3px 20px 3px;
}

/*== Footbar
 *=================================*/
#footbar .widget-col-5{width:100%;margin-left:0;}
#footbar.footbar-c4 .widget{width:300px;}

/* Fixed Youtube Video with JWPlayer*/
.fluid-width-video-wrapper embed{height:349px !important;}

/* End @media 
 *================================================================== */}

/*== Mobile
 *==================================================================*/ 
@media only screen and (max-width:639px) {
#main-nav .wrap{background:url(http://jwplayerskins.com/template/images/nav-sep.png) no-repeat right 0;}
#main-nav .menu{display:none;}
#main-nav .select-div{display:block;}
 
.loop-actions .orderby{display:none;}
.loop-actions .orderby-select{display:block;float:left;height:21px;padding:2px;text-transform:none;}
.loop-actions .prefix{display:none;}

.comment-form-author, .comment-form-email, .comment-form-url{
margin-left:0;
width:100%;
float:none;
}

/*== Structure */
body{min-width:320px;}
.boxed-wrap #page{width:320px;}
#main{padding:20px 0;}
.wrap{width:300px}
#content, #sidebar{width:100%;}

/*== Header
 *=================================*/
#branding{float:none;margin-bottom:10px;}
#site-logo img{margin:0 auto;}
#header-actions{float:none;}
#header-search{float:none;width:100%;margin:0;padding:15px 0 0;overflow:hidden;}

/*== Archive Content
 *=================================*/

.loop-actions .view .grid-small-link,  
.loop-actions .view .grid-medium-link, 
.loop-actions .view .list-large-link{display:none;}

.grid-small .item {
 width:140px;
 margin: 0 10px 20px;
}
.grid-small .thumb {
 width:140px;
 height:78px;
}
.grid-small .thumb img {
 width:140px;
}

.grid-medium .nag{margin: 0 -10px;}
.grid-medium .item{width:300px;margin: 0 10px 20px;}
.grid-medium .thumb{width:300px;height:168px;}
.grid-medium .thumb img{width:300px;}

.list-small .thumb {
 width:140px;
 height:78px;
}
.list-small .thumb img {
 width:140px;
}
.list-small .data {
 margin-left:158px
}
.list-small .meta, .list-small .stats{float:none;}
.list-small .stats > span{margin:0 10px 0 0 !important;}
.list-small .author,
.list-small .suffix,
.list-small .entry-summary{display:none;}

.list-medium .thumb {
 width:300px;
 height:168px;
 margin:0 0 10px;
}
.list-medium .thumb img {
 width:300px;
}
.list-medium .data {
 margin-left:0
}
.list-medium .author,
.list-medium .suffix{display:none;}
.list-medium .meta{float:left;}
.list-medium .stats{float:right;}
.list-medium .entry-summary{font-size:11px;}

.list-large .item{width:100%;}
.list-large .thumb{width:100%;height:168px;}
.list-large .meta, .list-large .stats{float:none;}
.list-large .stats > span{margin:0 10px 0 0 !important;}

/*== Featured Content
 *=================================*/
.home-featured .stage, 
.home-featured .nav{width:100%;}
.home-featured .stage{margin-left:-2px;}
.home-featured .stage,
.home-featured .stage .carousel-list{height: 168px;}
.home-featured .stage .item,
.home-featured .stage .thumb {
width: 300px;
height: 168px;
}
.home-featured .stage .thumb img{width:300px;}

.home-featured-full .stage,
.home-featured-full .stage .carousel{width:300px;height:168px;}
.home-featured-full .stage,
.home-featured-full .stage .carousel-list{height: 168px;}
.home-featured-full .stage .item,
.home-featured-full .stage .thumb {
width: 300px;
height: 168px;
}
.home-featured-full .stage .thumb img{width:300px;}

/*== Single Content
 *=================================*/
.entry-header .entry-title{float:none;margin:0 0 10px !important;}
.entry-header .entry-actions{float:none;margin:0;}

/*== Footbar
 *=================================*/
#footbar.footbar-c4 .widget{width:300px;}

/*== Colophon
 *=================================*/
#colophon{text-align:center;}
#social-nav{float:none;overflow:hidden;text-align:center;margin:0 0 10px;}
#social-nav li {
margin: 0 8px 0 0;

}
#copyright, #credits {
font-size: 11px;
margin: 0;
display: block;
}

.fluid-width-video-wrapper embed{height:259px !important;}
/* End @media ================================================================== */}</style>

//Khởi tạo player
jwplayer("jwplayerskindemo").setup({
    file: "https://www.youtube.com/watch?v=8Ot4ehxiNwg",
    width: "100%",
    height: "100%",
    primary: primaryCookie,
    //Đường dẫn skin cho player. Chú ý, file là dạng XML và được up lên chung với domain mới chạy được
    //skin: "lsOrange-Long-Shadow-Skins-for-JW6.xml",
});

/**Tạo button chuyển Flash <------> HTML5**/
jwplayer("jwplayerskindemo").onReady(function() {
    if (jwplayer().getRenderingMode() == "flash") {
        this.addButton("http://jwplayerskins.com/assets/html5.png", "Switch to HTML5", switchMode, "button1");
    } else {
        this.addButton("http://jwplayerskins.com/assets/flash.png", "Switch to Flash", switchMode, "button1");
    }
});
/**Hàm chuyển Flash <------> HTML5**/
function switchMode() {
    primaryCookie == 'html5' ? primaryCookie = 'flash' : primaryCookie = 'html5';
    document.cookie = "primaryCookie=" + primaryCookie;
    window.location.reload();
};
</script>

Thích Code | July 06, 2016 | Edit Post

ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.

Nhúng JWPlayer để chạy video vào website (Blog)

4 comments:

Most read

Latest