一 . 视频全屏可以通过css定义宽高100%来实现。

.videoBox{
width: %;
height: %;
} #example_video{
width: %;
height: %;
}
<div class="videoBox">
<video id="example_video" class="video-js vjs-default-skin vjs-big-play-centered" muted autoplay controls preload="none" width="" height=""
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
  <source src="https://wts.itqiche.com/u5/car_u5_video/XuHang.mp4" type='video/mp4' />
</video>
</div>

二. 视频打开页面自动播放。

1. 给video标签加入<video muted></video> 静音即可。

2. body下面加入js代码。

<script type="text/javascript">
var myPlayer = videojs('example_video');
videojs("example_video").ready(function(){
var myPlayer = this;
myPlayer.play(); // 自动播放
console.log();
});
</script>

video.js 视频自动全屏播放的更多相关文章

  1. 如何禁止 iPhone Safari video标签视频自动全屏?

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  2. Video如何不自动全屏播放?

    知乎:微信内置浏览器 如何小窗不全屏播放视频? 目前在微信中只能全屏播放,只有加入腾讯白名单的视频才能小屏播放. 知乎上讨论的解决方案尚未测试,太麻烦了.

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

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

  4. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

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

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

  6. 阻止 iPhone 视频自动全屏

    最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...

  7. h5 video 点击自动全屏

    加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn ...

  8. vlc播放器设置开机自动全屏播放网络视频流

    因工作需要,要用vlc视频播放器实现开机自动全屏播放某个网络视频流.百度了下,说的都很模糊,经过整理,设置方法如下: 一,添加视频流地址:rtsp://wowzaec2demo.streamlock. ...

  9. h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

    在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...

随机推荐

  1. <JZOJ5910>duliu

    愤怒 考场想到正解 然后觉得我的“正解”和正解差不多 一样的效果 被忽略的与正解的不同也想到了 然而 我懒得再写 于是快乐10分 气坏了 #include<cstdio> #include ...

  2. [洛谷P3366] [模板] 最小生成树

    存个模板,顺便复习一下kruskal和prim. 题目传送门 kruskal 稀疏图上表现更优. 设点数为n,边数为m. 复杂度:O(mlogm). 先对所有边按照边权排序,初始化并查集的信息. 然后 ...

  3. 吴裕雄--天生自然 R语言开发学习:主成分分析和因子分析(续一)

    #--------------------------------------------# # R in Action (2nd ed): Chapter 14 # # Principal comp ...

  4. spring整合ehcache实现缓存

    Spring 提供了对缓存功能的抽象:即允许绑定不同的缓存解决方案(如Ehcache),但本身不直接提供缓存功能的实现.它支持注解方式使用缓存,非常方便. spring本身内置了对Cache的支持,之 ...

  5. Python获取内网IP

    Python 获取本机内网IP 本文记录使用Python获取本机IP的两种方法. 通过hostname来获取本机IP import socket print(socket.gethostbyname( ...

  6. [人工智能]NumPy基础

    理解NumPy 本文主要介绍NumPy的基础知识,NumPy是一个功能强大的Python库,允许更高级的数据操作和数学计算. 什么是NumPy NumPy,来源自两个单词:Numerical和Pyth ...

  7. 【C++基础】008常量和变量

    简介:常量和变量. 常量和变量 1. 常量 具体把数据写出来 2,3,4: 1.2,1.3: "Hello World!","C++": cout <&l ...

  8. Centos 7 使用Securecrt 配置Public key 登录

    环境:Centos 7 SecureCRT 版本:8.0.4 需求:配置使用Public key 登录服务器禁用密码登录 1. 配置使用SecureCRT,生成Public key 跟私钥 2. 配置 ...

  9. IDEA打包web项目为war,通过本地Tomcat启动war

    1.打包 ①idea的打包很简单,网上教程也很多,简单说下:project struct-->artifact-->+-->Web Application:Archive--> ...

  10. Kali系统中20个超好用黑客渗透工具,你知道几个?

    1. Aircrack-ng Aircrack-ng是用来破解WEP/WAP/WPA 2无线密码最佳的黑客工具之一! 它通过接收网络的数据包来工作,并通过恢复的密码进行分析.它还拥有一个控制台接口.除 ...