标签: html5-video

我需要告诉你,视频是否无法播放(浏览器中显示"x"符号).

这段代码不起作用.Firefox下将永远不会触发"onerror"事件

var v = document.getElementsByTagName("video")[0];
    if ( v != undefined )
        v.onerror = function(e) {
            if ( v.networkState == v.NETWORK_NO_SOURCE )
            {
                // handle error
            }
        }

这有什么不对？

就目前而言,这仅在WebKit中进行了测试.

<video>使用poster属性在元素上设置海报图像时,将在用户播放视频之前显示此图像(默认行为).但是,如果海​​报图像的宽高比与<video>设置的元素的宽高比不同,则在图像的两侧(左侧或右侧或顶部和底部)可以看到空白(或可能是黑色空间),图像为居中(也是默认行为).

我想知道如何缩放此图像(最好是在CSS中),以便填充视频元素,类似于使用CSS3 background-size: cover;值.

仍然困惑？也许这个JSFiddle会帮助解释:http://jsfiddle.net/jonnymilano/2w2CE/

我也有兴趣将图像强制放入视频容器,扭曲其高度和/或宽度以适应视频容器的尺寸.但是,这个答案只会部分解决我的问题.

一些背景

我已经在FF和Safari(包括iDevices)中测试了我的视频并且播放正常,但它无法在Chrome浏览器中播放.正如您在下面的代码中看到的,我创建了mp4,m4v,webM和ogv文件,并且我已经在我的计算机上测试了所有这些文件以解决任何播放问题.

症状/问题

在Chrome中,视频似乎已加载,并且控制台日志中没有错误.按下播放按钮时,它会加载文件的一部分,但之后不会播放.然而,有趣的是,如果我在时间栏中随意点击一下,说到中途,即使有字幕,也会播放大约5秒的视频,但没有音频.

我的研究

我已经阅读了可能导致此问题的任何问题,但我没有找到任何有用的想法.要注意,我在.htaccess文件中写了以下内容:

# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------

# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a
AddType audio/webm                     webm

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard …

我了解了web-rtc,它说你可以捕获视频摄像头,我使用了演示,这只适用于镀铬..

当我在firefox上打开它"getUserMedia() not supported in your browser." 时,当我打开这个HTML5-rocks-demo时,我会在另一只手上收到消息

它100%工作.什么改变或插件或我想念的东西让我的getusermedia()工作.

我使用navigator.getUserMedia与约束来访问用户的摄像头,采用饲料作为HTML源<video>,然后复制其流,以drawImage一个<canvas>背景.我正在做这一切,所以我可以定期拍摄快照.

我想要做的是,一旦页面开始拍摄快照,锁定getUserMedia相机的焦点/曝光,以便在快照间隔之间环境可以改变,而不会改变光平衡或相机重新聚焦.

有谁知道JS方面是否可行？

我收到警告,在Chrome未来版本中将弃用某个功能.

这是这个脚本:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, (stream) => {
        this.src = window.URL.createObjectURL(stream);
        this.stream = stream;
    }, (error) => {
        console.log(error);
    });
}

这记录了网络摄像头,所以我可以保存它,但控制台中显示以下警告:

[弃用]不推荐使用带有媒体流的URL.createObjectURL,并且将在2018年7月左右在M68中删除.请改用HTMLMediaElement.srcObject.

但是当我改变时:

this.src = window.URL.createObjectURL(stream);

至

this.src = window.HTMLMediaElement.srcObject(stream);

它不再像之前那样工作了..

需要帮助才能添加文本,因此文本覆盖了HTML 5视频,而且我还需要添加表单输入和按钮,以下是我的HTML5视频代码.

<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>

AngularJS ng-src不适用于这个小提琴中的HTML5视频元素:http://jsfiddle.net/FsHah/5/

查看视频元素,src标记正在填充正确的src uri,但视频无法播放.

这是AngularJS 不支持的,这是什么解决方法？

是否有一种很好的方法来检测客户端浏览器是否允许HTML5视频的内联媒体播放？

更新

我不是想简单地检测视频支持.

我正在尝试检测视频是否只能播放全屏或内联播放.因为在iPhone的Safari游戏中,iOS视频只能全屏播放,但在iPad上可以在线播放视频.并且通过内联我的意思是在页面中没有切换到全屏.

我想制作实时视频流.例如,有讨论.有人正在录制它.我希望视频记录显示在我的网页上.我想用HTML 5做到这一点.我不知道是否可能,但有人试过吗？先感谢您!