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);

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
视频标签可以通过添加poster属性来设置视频封面。例如,在video标签中加入poster属性,将其值设置为图片链,即可将该图片作为视频封面。具体代码如下: ```html <video src="video_url" poster="封面图片链" controls="{{false}}" initial-time='0.01' muted autoplay object-fit="cover"></video> ``` 其中,video_url是视频的链地址,封面图片链视频封面的图片地址。通过这样设置视频在加载前会展示封面图片,提高用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [微信小程序:video标签默认显示视频的第一帧作为封面](https://blog.csdn.net/mouday/article/details/118517724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [video视频标签一些设置包括封面播放结束后的封面视频占满屏幕方式视频播放暂停展示控制、...](https://blog.csdn.net/qq_46617584/article/details/129185121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值