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属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
随机推荐
- 吴裕雄--天生自然python编程:实例(1)
str = "www.runoob.com" print(str.upper()) # 把所有字符中的小写字母转换成大写字母 print(str.lower()) # 把所有字符中 ...
- python socket实例
1.客户端向服务端发送 #coding:utf-8 '''客户端''' import socket khd=socket.socket() #声明socket类型,同时生产socket连接对象 khd ...
- Android 代码混淆规则
1. Proguard介绍 Android SDK自带了混淆工具Proguard.它位于SDK根目录toolsproguard下面.ProGuard是一个免费的Java类文件收缩,优化,混淆和预校验器 ...
- numpy创建的array
import numpy as np array = np.array([[1,2,3], [2,3,4]]) #打印列表 print(array)#是几维的 print('number of dim ...
- 11. 无数人难办事? - 迪米特法则(LoD)
11.1 第一天上班 时间: 4月2日19点 地点: 小菜大鸟住所的客厅 任务: 小菜, 大鸟 "回来啦! 怎么样? 第一天上班感受多吧." 大鸟关关心的问道. ...
- java23种设计模式 (转)
文章在:http://www.cnblogs.com/maowang1991/archive/2013/04/15/3023236.html 随着自己的开发经验增加以及自己做了很多的 大专栏 jav ...
- docker学习读书笔记-一期-整理
0.Docker - 第零章:前言 1.Docker - 第一章:Docker简介 2.Docker - 第二章:第一个Docker应用 3.Docker - 第三章:Docker常用命令 4.Doc ...
- 初识Flask框架
Flask简介: Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其 ...
- 【Art】物理课题——虹吸
前言(无关闲话):在此之前,课题小组讨论了三.四次,得有10个小时了总共,但是具体还是在普及常识,那就在这里深入地讲一下. 进入正题—— 这就是虹吸的基本模型,再看一下百度的官方说法: “虹吸(sip ...
- 不要写很酷但同事看不懂的Java代码
你好呀,我是沉默王二,一个和黄家驹一样身高,和刘德华一样颜值的程序员.为了提高 Java 编程的技艺,我最近在 GitHub 上学习一些高手编写的代码.下面这一行代码(出自大牛之手)据说可以征服你的朋 ...