给博客首图添加视频

发布于2017-09-25 / 2299次浏览

前言

话说回来，博客全屏播放视频这都是别的大佬玩剩下的。今天无聊，就把大佬吃剩下的鸡肋重新捡起来啃两口。 具体效果可以参考博客首页哦。

局部代码

喜欢爱折腾博客的小伙伴可以试试哦。

html代码：

<div class="video-body">
<video id="blog-video" src="http://oijbbaxnm.bkt.clouddn.com/youname123.mp4" preload="none"></video>
<img src="<?php echo get_template_directory_uri();?>/images/play.png" id="video-btn">
<h1><?php echo bloginfo('name')?></h1>
</div>

css样式:

.video-body{
  position: absolute;
  width: 100%;
  top:0;
  left:0;
  height: 100%;
}
video{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  margin:auto;
  width: 100%;
  height: auto;
}
#video-btn{
  width: 32px;
  position: absolute;
  bottom: 3px;
  right: 5px;
  cursor: pointer;
  opacity: .8;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transform: translate3d(0,0,0);
}

40%, 43% {
  animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transform: translate3d(0, -15px, 0);
}

70% {
  animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transform: translate3d(0, -7px, 0);
}

90% {
  transform: translate3d(0,-4px,0);
}
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
  opacity: 0;
  transform: translate3d(-3000px, 0, 0);
}

60% {
  opacity: 1;
  transform: translate3d(25px, 0, 0);
}

75% {
  transform: translate3d(-10px, 0, 0);
}

90% {
  transform: translate3d(5px, 0, 0);
}

to {
  transform: none;
}
}
.bounceInLeft {
  animation: bounceInLeft .5s;
  animation-fill-mode:forwards;
}

@keyframes bounceOutUp {
20% {
  transform: translate3d(0, -10px, 0);
}

40%, 45% {
  opacity: 1;
  transform: translate3d(0, 20px, 0);
}

to {
  opacity: 0;
  transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
  animation: bounceOutUp .5s;
  animation-fill-mode:forwards;
}
.video-body h1{
  font-size:28px;
  color: #fff;
  font-weight: 400;
  text-align: right;
  padding-right: 20px;
  position: relative;
  top:10px;
  display: none;
  opacity: .6;
}

js代码：

$(document).on("click","#video-btn",function(){
  if(!$(this).hasClass("video-play")){
  $(this).addClass("video-play").attr("src",theme_var.themeurl+"images/pause.png");
  $(".top-body").removeClass("bounceInLeft").addClass("bounceOutUp");
  $(".video-body h1").show();
  $("#blog-video").get(0).play();
  $(".video-body video").fadeIn();
}
else{
  $(this).removeClass("video-play").attr("src",theme_var.themeurl+"images/play.png");
  $(".top-body").removeClass("bounceOutUp").addClass("bounceInLeft");
  $(".video-body h1").hide();
  $("#blog-video").get(0).pause();
  $(".video-body video").fadeOut();
}
});
//结束监听
$("#blog-video").on("ended",function(){
  $("#video-btn").removeClass("video-play").attr("src",theme_var.themeurl+"images/play.png");
  $(".top-body").removeClass("bounceOutUp").addClass("bounceInLeft");
  $(".video-body h1").hide();
  $(".video-body video").fadeOut();
});

顺便说几句

因为视频区域会根据视频的实际大小进行比例缩放，所以<video>的长宽是很难调教的。

推荐小伙伴根据自己上传的视频分辨率进行调整。 如果视频是1:1，应该把css中的.videoheight定为100%，而width定为auto;

如果视频是16:9，那么width定义为100%，height定义为auto是刚刚好滴。（大部分屏幕分辨率都是16:9吧..）

至于流量，大家可以把视频上传到oss，比如七牛，阿里，腾讯，都是有一定的免费流量的。

视频没有设置autoplay，所以并不会在载入博客的时候载入视频哦。视频只会在你点击右下角的按钮时才会加载。

emmmm…手机端没有做相应的处理，流量少的还是不要手贱点播放了。不然轻轻松松30m流量跑了2333

Leave a Reply to 后宫学长

取消回复

▼

^_^

13 条评论