一 . 视频全屏可以通过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. IPSec 传输模式下ESP报文的装包与拆包过程 - 择日而终的博客

    一.IPsec简介 IPSec ( IP Security )是IETF(Internet Engineering Task Force,Internet工程任务组)的IPSec小组建立的一组IP安全 ...

  2. flume install

    flume install flume 安装 123456 [root@10 app][root@10 app]# mv apache-flume-1.7.0-bin /mnt/app/flume[r ...

  3. C++扬帆远航——8(张三李四,等差数列)

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:qiudengcha数列.cpp * 作者:常轩 * 完成日期: ...

  4. LeetCode 32,并不Hard的难题,解法超级经典,带你领略动态规划的精彩

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天给大家分享的是LeetCode当中的32题,这是一道Hard难度的题.也是一道经典的字符串处理问题,在接下来的文章当中,我们会详细地解读 ...

  5. 挖SRC逻辑漏洞心得分享

    文章来源i春秋 白帽子挖洞的道路还漫长的很,老司机岂非一日一年能炼成的. 本文多处引用了 YSRC 的 公(qi)开(yin)漏(ji)洞(qiao).挖SRC思路一定要广!!!!漏洞不会仅限于SQL ...

  6. 难道同事:Java 方法调用到底是传值还是传引用

    Java 方法调用中的参数是值传递还是引用传递呢?相信每个做开发的同学都碰到过传这个问题,不光是做 Java 的同学,用 C#.Python 开发的同学同样肯定遇到过这个问题,而且很有可能不止一次. ...

  7. 它的JS与HTML标签是分离的吗

    一个单的利用JS切换图片的功能写法1: <section> <h2>JS切换图片</h2> <ul class="pictable"> ...

  8. 授人以渔式解析原生JS写轮播图

    需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...

  9. moment太重? 那就试试miment--一个超轻量级的js时间库

    介绍 Miment 是一个轻量级的时间库(打包压缩后只有1K),没有太多的方法,Miment的设计理念就是让你以几乎为零的成本快速上手,无需一遍一遍的撸文档 由来 首先 致敬一下Moment,非常好用 ...

  10. Feign 注解翻译器 三

    一.自定义注解翻译器 (1)JAXRS 注解翻译器实例 ① 导入JAXRS所需要的jar包 <dependency> <groupId>io.github.openfeign& ...