video.js 视频自动全屏播放
一 . 视频全屏可以通过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 视频自动全屏播放的更多相关文章
- 如何禁止 iPhone Safari video标签视频自动全屏?
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...
- Video如何不自动全屏播放?
知乎:微信内置浏览器 如何小窗不全屏播放视频? 目前在微信中只能全屏播放,只有加入腾讯白名单的视频才能小屏播放. 知乎上讨论的解决方案尚未测试,太麻烦了.
- audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题
(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...
- video自动全屏播放
video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...
- iOS APP 中H5视频默认全屏播放问题解决
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
- 阻止 iPhone 视频自动全屏
最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...
- h5 video 点击自动全屏
加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn ...
- vlc播放器设置开机自动全屏播放网络视频流
因工作需要,要用vlc视频播放器实现开机自动全屏播放某个网络视频流.百度了下,说的都很模糊,经过整理,设置方法如下: 一,添加视频流地址:rtsp://wowzaec2demo.streamlock. ...
- h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式
在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
随机推荐
- 吴裕雄--天生自然 R语言开发学习:中级绘图(续一)
#------------------------------------------------------------------------------------# # R in Action ...
- Hihocoder1456 Rikka with Lattice
众所周知,萌萌哒六花不擅长数学,所以勇太给了她一些数学问题做练习,其中有一道是这样的:勇太有一个$n times m$的点阵,他想要从这$n times m$个点中选出三个点 ${A,B,C}$,满足 ...
- python settings 中通过字符串导入模块
1. 项目文件结构 set_test ├─ main.py # 入口函数 │ ├─notify # 自定义的模块 │ ├─ email.py # 自定义模块 │ ├─ msg.py # 自定义模块 │ ...
- ASP.NET CORE 内置的IOC解读及使用
在我接触IOC和DI 概念的时候是在2016年有幸倒腾Java的时候第一次接触,当时对这两个概念很是模糊:后来由于各种原因又回到.net 大本营,又再次接触了IOC和DI,也算终于搞清楚了IOC和DI ...
- iview 和 Elemet UI 源码比较
(近期给自己立了个小flag,读源码,每周至少读1篇源码) 下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别. 一.文件结构开发主要放在根文件夹下的s ...
- 纯JS实现KeyboardNav(学习笔记)一
纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...
- Redis(十一):哨兵模式架构设计分析
业务最初的应用场景中,我们也许使用单机redis就可以应付业务要求,但并非一直可行. 比如单机的读写能力问题,单机的可用性问题,单机的数据安全性问题.这些都是许多互联网应用经常会遇到的问题,也基本上都 ...
- Tomcat服务自动启动以隐藏start.bat命令窗口
该方法注意先要配置好CATALINA_HOME和path等环境变量.接着主要命令有:cmd命令符下进入tomcat/bin目录,输入:service.bat install (自定义的tomcat版本 ...
- 单片机基础——使用GPIO输出点亮一个LED灯
1. 准备工作 硬件准备 开发板首先需要准备一个小熊派IoT开发板,并通过USB线与电脑连接. 软件准备 需要安装好Keil - MDK及芯片对应的包,以便编译和下载生成的代码,可参考MDK安装教程 ...
- 2020ubuntu1804server编译安装redis笔记(一)及报make test错误解决办法
redis的大名我想大家都不陌生,今天在ubuntu server上进行编译安装,虽然apt也可以安装,但作为内存数据库,redis又是c开发的,编译安装,对机器的适应和性能更好. 安装笔记如下 第1 ...