我试图让其中的我覆盖到与JavaScript的网页视频的尺寸,但它返回的海报图像的尺寸,而不是实际的视频,因为它似乎被加载视频前它被计算.
我收到错误消息..
未捕获(在promise中)DOMException:play()失败,因为用户没有先与文档交互.
..当尝试使用Chrome版本66在桌面上播放视频时.
我找到了一个在网站上自动开始播放的广告,但使用以下HTML:
<video
title="Advertisement"
webkit-playsinline="true"
playsinline="true"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
autoplay=""></video>
那么,绕过Chrome的V66的自动播放拦截真的那么容易,因为只需添加webkit-playsinline="true",playsinline="true"和autoplay=""属性的<video>元素？对此有任何负面影响吗？
我希望将视频放在HTML5页面中,该页面将在页面加载时开始播放,一旦完成,就会循环回到开头而不会中断.视频也应该不具有任何相关的控制,以及或者是兼容所有"现代"的浏览器,或有填充工具的选项.
以前我会通过Flash和我这样做FLVPlayback,但我宁愿Flash在HTML5领域避开.我想我可以使用javascript setTimeout创建一个平滑的循环,但我应该用什么来嵌入视频本身？那里有什么东西会以这种方式传输视频FLVPlayback吗？
我想实现以下目标.
<video src="file:///Users/username/folder/video.webm">
</video>
目的是用户将能够从他/她的硬盘驱动器中选择文件.
不上传的原因当然是传输成本和存储配额.没有理由保存文件.
可能吗？
我正在尝试播放HTML5视频(VP8编码).我想要的是在某个位置玩它.让我们说50秒后的时间.
我试过但似乎有一些问题.你能否说一下我做错了什么？
这是代码:
<video id="vid1" width="640" height="360">
<source src="file.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<script>
document.getElementById('vid1').currentTime = 50;
</script>
我试过但它不起作用.视频加载时,它从刚开始播放.但是,如果我在播放过程中调用它,就像播放视频一段时间后它可以正常工作.有什么我想念的吗？
我正在尝试创建一个html5网页,其中有一个像13s的小视频,我将此视频的flash版本转换为3格式:.ogv使用fireFogg,.webm使用firefogg也和.mp4使用HandBrake应用程序html脚本我在我的页面中使用过:
<video width="800" height="640" loop preload="false" autoplay controls tabindex="0">
<source src="xmasvideo/video.mp4" type="video/mp4" />
<source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
<source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>
该视频在Chrome和FireFox中运行良好,但在桌面上的Safari和iPhone或iPad上都无法正常工作,输出只是一个空白页面,显示视频标签的控件但没有加载任何内容
请注意,我支持的Safari版本支持HTML5视频
有谁知道如何调整HTML5视频海报的大小,使其符合视频本身的确切尺寸？
这是一个显示问题的jsfiddle:http://jsfiddle.net/zPacg/7/
这是代码:
HTML:
<video controls width="100%" height="100%" poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
<source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
<source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>?
CSS:
video{
border:1px solid red;
}?
请注意,橙色矩形不会缩放到视频的红色边框.
此外,只是添加下面的CSS不起作用,因为它重新调整视频和海报:
video[poster]{
height:100%;
width:100%;
}
对于学校,我需要建立一个HTML5直播网站.他们有一个他们一直在使用的闪存流播放器,但现在他们希望它使用HTML5.我怎样才能做到这一点？我尝试使用视频标签,但我无法使用它.以下是我的代码.有人能指出我正确的方向吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Deltion Live Streaming</title>
<script language="javascript" type="text/javascript" src="../swfobject.js"></script>
</head>
<body>
<video id="movie" width="460" height="306" preload autoplay>
<source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
</video>
</body>
</html>
我看到的MediaElement接口公开属性,如paused,seeking和ended.但是,从列表中遗漏的是playing.
我知道有playing事件,当元素火开始播放,和timeupdate赛事活动定期一边玩,但是我正在寻找一种方法来确定视频是否正在播放现在.有没有一种简单的方法来确定这个？
我最接近的是:
!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)
我有一个视频作为网页的背景,我试图让它循环.这是代码:
<video autoplay='true' loop='true' muted='true'>
<source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>
即使我已经告诉视频循环,但事实并非如此.我也试图让它循环使用该onended属性(根据这个Mozilla支持线程,我也尝试了一点jQuery).到目前为止,没有任何工作.这是Chrome或我的代码的问题吗？
编辑:
我检查了网络事件和HEAD的工作副本(http://fhsclock-labs.heroku.com/no-violence)与我正在努力工作的应用程序.不同之处在于工作副本是从Heroku上的静态资产(通过Varnish,显然)提供视频,而我的服务来自GridFS(MongoDB).
Chrome的Inspector的"网络"标签显示,在我的应用程序中,视频会被请求三次.一次状态为"待定",第二次"取消",最后一次为200 OK.工作副本仅显示两个请求,一个是状态待定,另一个是206部分内容.但是,在视频播放一次后,该请求将更改为"已取消",并再次请求该视频.在我的应用程序中,这不会发生.
至于Type,在我的应用程序中,两个是"未定义"而另一个是"video/mp4"(应该是它).在工作应用程序中,所有请求都是"video/mp4".
另外,我Resource interpreted as Other but transferred with MIME type undefined.在控制台收到警告.
我不太确定从哪里开始.我相信这个问题是服务器端的,因为服务文件就像静态资产一样正常.可能是服务器没有发送正确的内容类型.这可能是GridFS的一个问题.我不知道.
无论如何,来源就在这里.您可以提供的任何见解表示赞赏.
html5-video ×10
html5 ×4
javascript ×4
video ×3
attributes ×1
css ×1
gridfs ×1
ipad ×1
iphone ×1
jquery ×1
mime-types ×1
offline ×1
rack ×1
safari ×1