一 . 视频全屏可以通过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. TCP\IP协议簇-分层模型

    OSI 模型   数据单元 层 功能 主机层 Data(数据) 7. 应用层 网络进程到应用程序. 6. 表示层 数据表示形式,加密和解密,把机器相关的数据转换成独立于机器的数据. 5. 会话层 主机 ...

  2. GYOJ_1812_股票(stock)

    题目描述 2130年,股神巴菲特投胎了!他投胎到你身上! 你作为股神转世,能力比原股神还要强,你可以预测到今后n天的股价.假设刚开始你的手上有1元钱,你想知道n天后你最多可以赚到多少钱.作为股神转世, ...

  3. js中判断为false的情况

     document.write((new Boolean())+"<br />");        document.write((new Boolean(" ...

  4. 腾讯自动化测试的AI智能

    引子: 本文是林奕在腾讯 DevDays 2018 分享内容的脱敏整理,介绍了 CSIG 测试开发中心(前 SNG 测试开发中心)在自动化测试领域所做的智能化尝试. 大致分成下面几部分: 使用AI面对 ...

  5. Pygame相关

    pygame是主要构筑在SDL库基础上的一组Python模块的集合,它使我们能够用Python语言来创建功能完整的游戏和多媒体程序.pygame是高度括平台可移植的,在任何SDL支持的平台上都可以运行 ...

  6. RHEL系统下安装atlassian-jira-5

    操作系统:RHEL 6.4 x86_64 Jira版本:atlassian-jira-5.2.11-x64.bin 安装路径:/opt/atlassian/jira/ 数据保存路径:/opt/atla ...

  7. coreseek 在gcc 4.9+ 上编译不通过 [sphinxexpr.o] Error 1 错误解决方案

    这几天玩hhvm,把gcc环境都装到4.9了,然后编译coreseek的时候就出问题,google一大圈,貌似捕风捉影看到一些信息说是gcc4.7+的c++作用域必须用this->去引用,这里整 ...

  8. C#连接Informix数据库

    最近在工作中遇到了需要连接Informix数据库的问题,在通过研究后发现了可以通过多种方式实现,我选择的是通过IBM Informix .NET Provider.该方式需要引用IBM.Data.In ...

  9. Java入门教程八(面向对象)

    对象概念 一切皆是对象.把现实世界中的对象抽象地体现在编程世界中,一个对象代表了某个具体的操作.一个个对象最终组成了完整的程序设计,这些对象可以是独立存在的,也可以是从别的对象继承过来的.对象之间通过 ...

  10. Python开发(三):字符编码,文件操作,函数

    一:三级菜单 If len(choice) == continue # 判断输入的是否为空,为空就跳出这次循环进行下次循环, exit(“bye”) :退出程序显示,bye 二:编码 最早的编码是as ...