Multi Tab Streaming Video

Hướng dẫn Cách tạo Video Truyền trực tuyến Nhiều tab Nhấp để Tải Iframe

Cài đặt phát Video Streaming nhiều tab trên Blog, lần này mình sẽ chia sẻ lại một widget cho blog phim sẽ hiển thị một số tùy chọn máy chủ và chất lượng video khác nhau.

Đối với những bạn tạo blog movie, thường bạn phải tạo một vài video / phim sao lưu trên một máy chủ khác để đề phòng trường hợp máy chủ kia gặp sự cố / đang được bảo trì. 

 

Với tiện ích Phát video nhiều tab, video/ iframe bên trong sẽ chỉ được tải khi click chuột vào . Vì vậy, sẽ không ảnh hưởng tới tốc độ khi tải blog của bạn ..
Demo phát video nhiều tab

Để thực hiện, bạn có thể làm theo từng bước dưới đây

Tạo luồng video máy chủ nhiều tab trên blog

• Đăng nhập vào tài khoản blogger của bạn

• Vào menu Template→Edit HTML

• Tiếp theo hãy tìm mã </head>

• Sau khi gặp nó, hãy nhập CSS bên dưới ngay trên nó

Cài đặt phát Video Streaming nhiều tab trên Blog,

<style type="text/css">
/*CSS Multi Tab Video by Blog Mas Tamvan*/
#multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
#multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
#multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#multitab-video #server-list{position:relative;background:#fafafa;display:block}
#multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
.server-item{border-bottom:1px solid #c8c8cb}
#multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box}
a:active{background-color:yellow}
</style>

• Lưu mẫu

Bây giờ nó vẫn chỉ để cài đặt mã html để hiển thị video trong bài đăng. Đăng nhập để đăng bài muốn hiển thị nhiều Tab Video Streaming.

• Chọn chế độ soạn thảo HTML

• Tiếp theo, sao chép và nhập mã HTML bên dưới

<div id='multitab-video'>
 <div id="movie-player">
 <iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
 </div>
 <div id="server-list">
 <div class="server-item" title="NAMA SERVER">
 <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
 <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
 <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
 <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
 </div>
 <div class="server-item" title="NAMA SERVER">
 <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
 <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
 <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
 <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
 </div>
 </div>
</div>

• URL VIDEO ĐÃ ĐƯỢC KẾT NỐI : Thay đổi Liên kết Phim / Video của bạn và điều chỉnh nó về chất lượng, nếu không xóa nó.
• TÊN MÁY CHỦ : Thay đổi tên của máy chủ tải lên video bạn đang sử dụng

• Xong, Lưu và xem kết quả

Cre: mastamvan