video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频链接、视频播放暂停、展示控制栏、触发全屏播放事件

<video  id="video" autoplay="autoplay" muted='muted' controls="controls" poster="../../img/newIndexImages/images/indexifrstpost.png">
<source src="img/resource/2019/ptxd/lbdjzz.mp4" type="video/mp4">
</video>

代码如上,poster属性用于设置视频封面;视频链接放在source标签内的src属性;加controls属性就会展示控制栏,不加不显示;

视频占满屏幕的方式

height:100%;
width:100%;
object-fit:cover;

以下为object-fit属性,可以都尝试下效果看看哪种是你比较喜欢的铺满效果(值得注意的是IE浏览器不兼容此属性)

object-fit关键属性:

object-fit:fill

被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应(会变形)。

object-fit:container

被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

object-fit:cover

被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。

object-fit:none

被替换的内容尺寸不会被改变。

object-fit:scale-down

内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。

视频进入网页自动播放

查阅资料都是说在vedio属性中加 autoplay="autoplay" muted='muted',如第一段代码,但是我试了都是被浏览器评屏蔽掉的(为了提高用户体验,浏览器不允许自动播放事件,除非用户自己做了点击播放事件),

在强制刷新时,才会自动播放,网页刚进入并不会播放,我也尝试了triggle事件去自动触发点击事件也不行,以下是能够成功自动播放的代码

var myVideo=document.getElementById("video");
myVideo.muted=true
myVideo.play();

在js里面定义muted,然后触发play()

播放结束后的封面

没有找到好的办法,最后还是写了一个假的,就是视频播放完了,在视频上面盖一个图片挡住视频,播放时隐藏,播放完展示

 myVideo.onended = function() {
$(".endimg").show()
};

视频播放暂停

$(".start").click(function(){
var myVideo=document.getElementById("video");
if (myVideo.paused) {
myVideo.play();
}else {
myVideo.pause();
}
})

视频触发全屏

function launchFullscreen(element){
//此方法不可以在異步任務中執行,否則火狐無法全屏
  if(element.requestFullscreen) {//浏览器兼容
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.msRequestFullscreen){
    element.msRequestFullscreen();
  } else if(element.oRequestFullscreen){
    element.oRequestFullscreen();
  } else if(element.webkitRequestFullscreen){
    element.webkitRequestFullScreen();
  }else{
    var docHtml = document.documentElement;
    var docBody = document.body;
    var videobox = document.getElementById('video');
    var cssText = 'width:100%;height:100%;overflow:hidden;';
    docHtml.style.cssText = cssText;
    docBody.style.cssText = cssText;
    videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
    document.IsFullScreen = true;
  }
}
//应用
var myVideo=document.getElementById("video");
launchFullscreen(myVideo);

video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件的更多相关文章

  1. [转]Android WebView播放视频(包括全屏播放),androidwebview

    Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...

  2. audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

  3. HTML5新标签video在iOS上默认全屏播放

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  4. html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  5. MUI ios下用video标签默认全屏播放

    前几天用Hbuilder+MUI做了个应用,里边用到<video>标签,在Android下正常,但是在苹果手机老是默认全屏播放. 解决办法: 首先在video标签加上playsinline ...

  6. 解决video标签在微信中强制全屏、微信全屏播放(Android和IOS)

    在video标签中加上代码: x5-playsinline="true" webkit-playsinline="true" playsinline=" ...

  7. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  8. 微信非全屏播放设置(仅Iphone)

    由于微信X5内核强制视频全屏,用X5自带内核播放,一般内嵌视频打开播放就会被全屏. ihpone里面可以通过设置 x-webkit-airplay="true" webkit-pl ...

  9. vue video全屏播放

    需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...

随机推荐

  1. BPM配置故事之案例12-触发另外流程

    还记得阿海么,对就是之前的那个采购员,他又有了些意见. 阿海:小明,你看现在的流程让大家都这么方便,能不能帮个忙让我也轻松点啊-- 小明:--你有什么麻烦,现在不是已经各个部门自己提交申请了嘛? 阿海 ...

  2. django ORM

    http://www.cnblogs.com/alex3714/articles/5512568.html 常用ORM操作 一.示例Models from django.db import model ...

  3. Linux杂乱小知识点

    1.不同网段的主机不能建立TCP连接 2.TCP客户端可以用bind绑定自己的IP与port(一般情况下不需要绑定,port由系统自动分配) 3.accept() 函数返回一个套接字,send / r ...

  4. (C语言)数组与指针的区别

    以前常常听过这种说法,说数组和指针这两者比较像,但是不能混淆,可是一直没能理解.刚刚在李云的<专业嵌入式软件开发>中,看了讲述数组与指针区别的一章,似乎有所领悟.本着知乎上看到的这张图,我 ...

  5. IIS:连接数、并发连接数

    IIS:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池的最大工作进程数详解 iis性能指标的各种概念:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池 ...

  6. git的忽略文件和删除文件操作

    1 删除工作区和暂存去的a文件$ git rm a 2只删除暂存去的 a文件,a文件就不被跟踪了.可以执行git add a从新添加回暂存去$ git rm --cached a 3 git mv 操 ...

  7. android的activity的跳转

    1.无参数的跳转 先在layout下建立一个factivity.xml,在里面添加2个Button按钮和一个TextView,并添加属性 , 然后建立以个sactivity.xml文件, 在src下建 ...

  8. SQL Server 2005 To Oracle

    近期因为项目需要,将SQLServer2005转成Oracle 在这里介绍下转换步骤: 1. 准备好你要转换的数据,如图 2. 右键单击 任务/导出数据,如图 3. 执行完之后就打开选择数据源页面,填 ...

  9. Web API设计

    Web API设计经验与总结 在移动互联网的时代, Web服务已经成为了异构系统之间的互联与集成的主要手段,各种 Web服务几乎都采用REST风格的Web Api来构建. 通过Http协议的形式来. ...

  10. LinkedList的自定义实现

    一.背景 LinkedList双向链表: 代码: Node.java: package com.cy.collection; public class Node { Node previous; // ...