标签: html5-video

我一直在使用webkitGetUserMedia方法(getUserMedia通过adapter.js)在我的网络应用程序上为webRTC获取相机nad microhpone.我的服务器不安全(没有SSL证书).一切正常,直到我开始收到错误说:"getUserMedia()不再适用于不安全的起源.要使用此功能,您应该考虑将应用程序切换到安全的来源,例如HTTPS.请参阅https:// goo. gl/rStTGz了解更多详情."

我用谷歌搜索,我看到现在在Chrome中我需要使用navigator.mediaDevices.getUserMedia().我使用的是Chrome 47.0.2526.80 m,在此页面上https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia,它表示此版本应该支持此方法.但是,当我调用navigator.mediaDevices.getUserMedia时,我得到了未定义.所以现在我不能在Chrome中使用任何一种方法.

任何人都可以帮我解决这个问题.谢谢

我使用PHP脚本在提供视频请求之前验证它们.此脚本可在桌面上使用Safari和Chrome按预期工作.但是在iOS上,我得到了一个破坏的播放按钮.

我确定该视频已正确编码为iPhone/iPad,因为当我直接访问它时,它按预期工作.

相关的PHP代码:

$file_name = 'test-video.mp4';
$file_size = (string)(filesize($file_name));
header('Content-Type: video/mp4');
header('Content-Length: '.$file_size);
readfile_chunked($file_name);
exit;

(readfile_chunked()类似于readfile()非常大的文件,可以在PHP手册页的注释中找到:http://php.net/manual/en/function.readfile.php.无论如何,test-video.mp4只有~5 MB,这是小于内存限制 - 在这种情况下,我实际上可以在正常情况下替换readfile()并产生完全相同的行为.)

我test-video.mp4直接访问时获得的标题是:

Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:5558749
Content-Type:video/mp4
Date:Sun, 27 Jun 2010 21:02:09 GMT
Etag:"1c04757-54d1dd-489944c5a6400"
Keep-Alive:timeout=10, max=30
Last-Modified:Tue, 22 Jun 2010 01:25:36 GMT
Server:Apache/2.2.15 (CentOS) mod_ssl/2.2.15 0.9.8l DAV/2 mod_auth_passthrough/2.1 FrontPage/5.0.2.2635

PHP脚本的标头是:

Connection:Keep-Alive
Content-Disposition:inline; filename="test-video.mp4"
Content-Length:5558749
Content-Type:video/mp4
Date:Sun, 27 Jun 2010 21:03:32 GMT
Keep-Alive:timeout=10, max=15
Server:Apache/2.2.15 (CentOS) mod_ssl/2.2.15 0.9.8l DAV/2 mod_auth_passthrough/2.1 …

我开发了一个MVC3应用程序,因为我运行应用程序时使用html5视频控件,它在Chrome浏览器中播放但是当我尝试在IE8浏览器中播放它不播放视频只是它只显示白页...如何在所有浏览器中播放视频请帮帮我..

这是我在我的页面中所做的代码

<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"
    width="640" height="360">
    <source src="../../Videos/Nenu Nuvvuantu - Orange - MyInfoland.mp4" type="video/mp4" />
   <%-- <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />--%>
    <source src="../../Videos/Nenu Nuvvuantu - Orange - MyInfoland.ogv" type="video/ogv" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
        width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'../../Videos/Nenu Nuvvuantu - Orange - MyInfoland.mp4','autoPlay':false}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"
            width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>

奇怪的是,一些MP4文件将在HTML5中播放,但其他人则不会.这是一个测试页面http://psdtucss.com/test/test2.html,在Chrome 19.0.1084.46 m中打开它.第一个MP4播放,但另一个不播放.什么原因.代码很简单:

<h3>the first mp4 file can play</h3> 
<p><video width="640" height="264" controls="controls"><source src="1.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p> 
<h3>but the other can't play</h3> 
<p><video width="640" height="264" controls="controls"><source src="2.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>

我怎样才能解决这个问题？

我试过videojs,但仍然有些MP4文件无法播放.测试页面在这里:http: //psdtucss.com/test/test.html

是否可以跨浏览器设置浏览器原生视频的控件,例如来自HTML5视频标签的视频？

我不明白是否可能,我找不到除了:

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

但它似乎使用Javascript

我想让控制条适合视频宽度; 从附图中可以看出,控制条超出了视频宽度.

上面图片的HTML

 <div class="video centered-content">
    <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
        <video width="63%" height="60%" id="video" class="video" controls>
            <source src="<?php echo base_static_url();?>media/video.mp4">
            <source src="<?php echo base_static_url();?>media/video.ogv">
            <source src="<?php echo base_static_url();?>media/video.webm">
        </video>
    </a>
</div>

我一直在实施webrtc视频聊天.

除了对等关闭浏览器的情况外,一切都顺利进行.

我一直试图通过在远程媒体流上实现一个关于回调的回调来处理这个事件.但是,这个回调似乎从未被调用过.

如何检测对等方的浏览器已关闭或另一方已完成连接？

我想通过固定div中的视频html5标签显示视频.我通过使用最小高度和最大高度来最大化它.但我也希望它集中在一起.

<div class="fixed-width-height">
    <video style="min-width:100%; min-height:100%;" controls autoplay>
        <source src="myvid.mpg" type="video/mp4">
        Your browser does not support the video tag
    </video>
</div>

现在,div总是显示视频的上部/左部,具体取决于div的大小.最好总是显示中心.

更新:视频标签现在居中,jbutler483非常出色,但视频大小存在问题,具体取决于取景div或视频比例或大小.视频未覆盖整个区域或居中失败.这是一个符合400x400盒子需求的剪切,但在1000x200时失败.http://jsfiddle.net/cremers/7Lgfyg1d/6/

更新:找到一个非IE的工作解决方案:object-fit: cover; object-position:center;但我想有一个完整的工作解决方案.

更新: Polyfill应该提供所需的功能,我将在视频标签上对此进行测试,这是Philip Dernovoy. 更新:我很抱歉,但我没有得到这个工作.

您可以设置HTML5视频元素的播放速率:

var player = document.getElementById("video");
player.playbackRate = 100;

w3规范没有定义限制.<video>Chrome和Firefox 中该元素的最大播放率是多少？如果播放速率不依赖于浏览器,那么它决定了什么呢？

研究:

MDN HTML媒体元素表示某些浏览器将停止播放0.25x - 4x之间播放范围之外的音频.它没有说明视频元素是否会继续播放视频.

YouTube的播放器支持0.25x - 2x之间的速度.这是一个Flash播放器,而不是HTML5视频元素,我对它不感兴趣.

就个人而言,我已经在我的计算机上本地创建了一个测试页面,其中包含<video>元素和本地视频文件.我可以将播放设置为任何内容(例如100),但视频的播放速度似乎不会超过~5x.我实际上无法检查播放速度,因为它只返回我设置的值"100".

我们正在创建一个chrome扩展程序来下载视频,目前我有这个功能:

function downloadvideo(video)
{
    const url = URL.createObjectURL(video.captureStream());
    const aelem = document.createElement('a');
    document.body.appendChild(aelem);
    aelem.setAttribute("href",url);
    aelem.setAttribute("download","video.mp4");
    aelem.click();
    //URL.revokeObjectURL(url);
}

这里的video参数是一个html5视频元素,我正在使用,caputreStream因为一些网站(特别是youtube)使用的blob网址明显被撤销所以我创建了一个新的Blob网址MediaStream.

上述功能作为视频onloadeddata事件的一部分执行.

显示对话框并且文件名正确但是当我点击"保存"时,chrome说"失败:找不到文件".

那么如何让它真正起作用呢？

顺便说一句,我试图对ajax做反对,url但chrome拒绝了这条消息:"只有方案http,https,chrome,chrome-extension支持交叉源:"3.

我正在为html5视频运行以下代码.

var media;
function videotr(){
  media = document.createElement('video');
  media.preload = true;
  media.id = 'it'; 
  document.getElementById('crop').appendChild(media)
  return media;
}                
var div = document.getElementById('crop');
$(div).empty();
this.image = new videotr();
this.image.src = args.src;

但是,我想实现多个兼容源.如何通过java脚本添加多个源？我想以正确的方式做到这一点,而不是通过innerHtml.