标签: html5-video
iPad Safari mobile似乎忽略了html5视频元素的z-indexing位置
我在一个页面上有一个视频元素,它在safari移动和桌面上都运行良好.我有一个透明的下拉菜单,工作正常.问题是,当菜单在视频元素上时,在桌面游戏中我可以看到菜单下的视频(根据需要),而在移动版本上,视频元素保持在前景(丑陋),无论我告诉什么css.有没有解决方法？
推荐指数
解决办法
查看次数
HTML5视频 - 已加载百分比？
有谁知道我需要查询什么事件或属性才能获得HTML5视频加载量的百分比数字？我想画一个CSS样式的"加载"栏,宽度代表这个数字.就像You Tube或任何其他视频播放器一样.
因此,就像你管视频一样,即使整个视频没有加载也会播放,并向用户提供有关已加载视频的数量并留下加载的反馈.
就像YouTube上的红酒吧:
推荐指数
解决办法
查看次数
HTML5 - mp4视频无法在IE9中播放
我有一个mp4视频,我想在IE9中使用HTML5 <video>标签播放.我将MIME类型添加到IIS 7中,因此如果我浏览http://localhost/video.mp4它在Chrome和IE9中播放但在HTML5中播放,则Chrome会播放HTML视频.这是代码:
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
有任何想法吗？
谢谢
更新:
在Firefox 5.0中尝试过相同的文件但它也无法正常工作,只有Chrome才能播放mp4视频.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
HTML 5视频"自动播放"不会自动在CHROME中启动
我有以下代码:
<video controls autoplay>
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.webm" type="video/webm">
<source src="video/myVideo.ogv" type="video/ogg"> </video>
该视频:
- 在Chrome和Firefox中都能很好地显示
- 在Firefox中它按预期播放
- 在Chrome中显示但不是"自动启动".这就是问题.
- 如果我点击它(在Chrome中)它就可以了
试着
<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>
在Chrome中没有任何效果
然后我也尝试按照https://en.wikipedia.org/wiki/HTML5_video中的建议更改编解码器,但它也不起作用:
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
所以现在我走到了尽头.感谢您的任何指示!非常感激.
推荐指数
解决办法
查看次数
html5视频上的圆角
有没有办法可以使用CSS3 border-radius属性切断html5视频元素的角落？
看看这个例子.它不起作用.
推荐指数
解决办法
查看次数
使用HTML5视频时是否需要WebM和ogv格式？
从videojs.com的文档中,我的印象是我需要包含ogv和webm文件格式(除了mp4).
然后我读了http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=erNepglDbZl,看起来我只需要mp4和(ogv或webm).
什么是正确的？我需要这三个吗？
推荐指数
解决办法
查看次数
在HTML 5视频上叠加DIV
我需要覆盖包含HTML 5视频的div的div ON TOP.在下面的示例中,重叠的div的id是"video_overlays".见下面的例子:
<div id="video_box">
<div id="video_overlays"></div>
<div>
<video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
</div>
</div>推荐指数
解决办法
查看次数
为什么iOS上的Safari没有显示我的HTML5视频海报？
我有这个网页:
http://healthpad.net/dashboard/
它有10个<video>元素.
出于某种原因,当我在iPad上加载页面时,它没有显示视频海报.
请尝试以下方法:
- 在桌面浏览器上加载页面
- 将它加载到iPad或iPad模拟器上,你会得到一个带有播放按钮的大黑盒子
请告诉我为什么会这样？
这是我已经排除的:
图像内容类型标题.
我已经验证了图像内容类型标题已正确设置.在上面的示例中,Content-Type标头正确image/jpeg.
对video.js库的干扰
VideoJs用于在桌面浏览器上显示漂亮的播放按钮并自定义控件.但是,此库不会干扰本机播放器.
为了确保,我创建了一个没有video-js类的测试视频页面,因此该库不会拾取和处理该视频.事实上,测试页面甚至不包含任何JS库,它只是
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
使用Mobile Safari可能不支持的任何视频属性
上面的测试页面只有一个普通的视频标签.我已经尝试删除除了src和之外的所有其他属性poster,它没有帮助.
关于该主题的大多数StackOverflow问题只是说"重启你的iPad"
这是奇怪的地方:
如果您对此进行谷歌搜索,已经接受的StackOverflow上的答案通常会说"重启您的iPad,这对我来说就是这样".
所以我尝试过做同样的事情,起初我只是说它在我的情况下不起作用.
然后,我尝试了这个:(
iPad模拟器上的所有以下内容)
- 去网站,视频海报不显示
- 转到测试页面(http://healthpad.net/rj_templates/test/zzz/),视频海报不显示.
- 单击主页以退出Safari(或模拟器的Cmd + Shift + H mac快捷方式)
- 双击主页按钮以获取Safari外部的任务切换器,点击并按住Safari图标,直到显示终止按钮.
- 杀死Safari
- 打开野生动物园(重新启动).此时,如果您加载测试页面(只有一个视频),海报将会显示.
- 现在转到多视频页面:(http://healthpad.net/dashboard/).视频海报不显示.
- 回到单视频测试页面,那个视频海报也不再适用.
- 重复步骤3到8,查看视频海报何时停止工作的过程.
显然,在某些时候,Mobile Safari决定不再展示任何视频海报.此外,显然,我的网站触发了这种情况.
澄清:
当海报不再有效时,它不仅会出现在一个域上,也不会为任何其他网站加载任何视频海报,无论它是否位于一个完全不同的域上(例如来自http://www.videojs的演示视频).com /).
为了重置这种行为,从我看到的,你必须杀死并重新启动Safari.关闭并重新打开它不会重置此状态.
有谁知道为什么会这样？有办法解决它吗？
推荐指数
解决办法
查看次数
如何设置视频文件的预览,从输入类型='文件'中选择
在我的一个模块中,我需要从输入[type ='file']浏览视频,之后我需要在开始上传之前显示所选视频.
我正在使用基本的HTML标签来显示.但它不起作用.
这是代码:
$(document).on("change",".file_multi_video",function(evt){
var this_ = $(this).parent();
var dataid = $(this).attr('data-id');
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^video/.test( files[0].type)){ // only video file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set video data as background of div
var video = document.getElementById('video_here');
video.src = this.result;
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="400" controls >
<source src="mov_bbb.mp4" id="video_here">
Your …推荐指数
解决办法
查看次数