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属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
随机推荐
- Docker的自动构建镜像
Dockerfile自动构建docker镜像类似ansible剧本,大小几kb手动做镜像:大小几百M+ dockerfile 支持自定义容器的初始命令 dockerfile主要组成部分: 基础镜像信息 ...
- tomcat6版本虚拟目录详细配置
在tomcat6版本中: 一. 1.[官方文档]本人不推荐. 在tomcat\conf下server.xml中找到 <Host name="localhost" appBa ...
- grep显示前后几行信息
显示foo及前5行 1 grep -B 5 foo file 显示foo及后5行 1 大专栏 grep显示前后几行信息ode"> grep -A 5 foo file 显示 file ...
- MongoDB启动.mongorc.js报错解决方法
在bin目录下输入./mongo --norc 不去加载.mongorc.js
- 测试用例设计经典面试题之电梯、杯子、笔、桌子、洗衣机、椅子、ATM等
测试用例设计经典面试题之电梯.杯子.笔.桌子.洗衣机.椅子.ATM等 1.测试项目:电梯 需求测试:查看电梯使用说明书.安全说明书等 界面测试:查看电梯外观 功能测试:测试电梯能否实现正常的上升和下降 ...
- [PyTorch入门之60分钟入门闪击战]之训练分类器
训练分类器 目前为止,你已经知道如何定义神经网络.计算损失和更新网络的权重.现在你可能在想,那数据呢? What about data? 通常,当你需要处理图像.文本.音频或者视频数据时,你可以使用标 ...
- 使用python模拟登录网易邮箱网站
环境要求 python 3.6 chromedriver.exe 文件 人工登录 人工登录某个网站,首先需要用浏览器打开登录页面,然后在输入框中输入对应的账号和密码,最后点击登录,以下使用代码模拟以上 ...
- webpack 手动创建项目
前言: webpack作为当前算是比较流行的打包工具之一,通过设置入口文件开始会把入口文件所依赖的所有文件(js,css,image等)进行对应的打包处理,其实现当时真的是很独特.现在流行的脚手架工具 ...
- 爬虫(二)requests 登陆某检索网站
1 import requests import os from PIL import Image import pytesseract import re rootUrl = xxx # 构建登录页 ...
- python数据分析工具 | pandas
pandas是python下强大的数据分析和探索工具,是的python在处理数据时非常快速.简单.它是构建在numpy之上的,包含丰富的数据处理函数,支持时间序列分析功能,支持灵活处理缺失数据. pa ...