个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

给博客首图添加视频

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

前言

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

局部代码

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

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 :evil:

喜欢 4
TAGS:  暂无标签
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 给博客首图添加视频

13 条评论

  1. xema 说道: 来自 Firefox 57.0 in Ubuntu Linux
    2017-12-30 19:46

    流量输出挺高的~记得以前打开某个dalao的博客,居然卡在了加载视屏哪里

    • 后宫学长 说道: 来自 Firefox 57.0 in Windows 10
      2018-01-03 6:46

      @xema 肯定的,我服务器100M输出还行,只是Nginx配置有点BUG,加载视频文件会导致断开连接,就一直没上视频封面、 :cry:

      • admin 博主 说道: 来自 Google Chrome 63.0.3239.84 in Windows 8.1
        2018-01-03 10:52

        @后宫学长 我用的七牛免费oss,感觉速度还行呀。首页的single dog看的很过瘾。

  2. 野兔 说道: 来自 Google Chrome 62.0.3202.89 in Windows 10
    2017-12-14 20:10

    这个效果是真赞!大佬就是大佬

  3. qq_avatar 月宅酱 说道: 来自 unknow in Iphone 11_2 like Mac OS X
    2017-12-04 12:19

    很不错噢

    • admin 博主 说道: 来自 Google Chrome 55.0.2883.87 in Windows 8.1
      2017-12-04 12:59

      @月宅酱 大佬,我可以用你的API吗~ :redface:

      • qq_avatar 月宅酱 说道: 来自 Google Chrome 55.0.2883.87 in Windows 10
        2017-12-04 13:11

        @admin 好了,可以正常使用了

  4. 晴和君 说道: 来自 Safari 604.1.38 in Mac OSX 10_12_6
    2017-10-07 23:09

    没有添加对返回等操作的处理?

    • qq_avatar 柠檬酸 说道: 来自 Google Chrome 55.0.2883.87 in Windows 8.1
      2017-10-07 23:11

      @晴和君 只做了一个简单的播放和暂停。

  5. 无人小站 说道: 来自 Google Chrome 55.0.2883.87 in Windows 10
    2017-09-29 11:12

    dalao的操作