标签: html5-video

我已经花了几周的时间来摆弄HTML5视频/音频的地狱.通常是一段时间后出现失败的原因,但我一直都无法找到为什么我会在Chrome中转发和重新排列问题.

无论如何...

当请求视频或音频文件时,视频或音频标签正在加载到extjs面板中.这些文件作为流发送,它们在IE和Firefox中运行良好(在响应头添加持续时间之后)safari存在问题,但显然整个站点都在HTTPS中运行(现在正在进行).

在chrome(这是我的问题并且是最新版本)中,视频和音频加载得很好,但我无法倒带或前进.当试图寻找视频时,请继续几秒钟,直到它到达流的末尾.音频也播放得很好但是多次尝试倒带(或前进)只会打破进度条并停止播放音频.

我不完全确定从服务器发送了什么,但我想知道这是否可能是由于响应中缺少数据引起的.如果不是其他任何指向我修复的东西也同样受欢迎.我想我已经覆盖了整个设置,我确保每个浏览器都有一个源标签.

编辑:这是javascript为其中一个文件生成的代码:

<video width="1889" height="2" preload="auto" autoplay="1" controls="1" id="videoPlayer" style="width: 1889px; height: 233px; ">
<source src="http://localhost:8080/epaServer/epa/documents/496.ds_webm?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb" type="video/webm">
<source src="http://localhost:8080/epaServer/epa/documents/496.ds_mp4?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb" type="video/mp4">
<div>Your browser doesn't support html5 video. <a>Upgrade Chrome</a></div>
</video>

我还发现,即使我从应用程序中单独打开它,我也无法找到任何文件.

我试图在我自己找到更多信息,这些是网络标签中的标题铬显示:

请求URL:https:// localhost:8443/epaServer/epa/documents/496.ds_webm？sessionId = 5616fde4-50af-43d6-a57c-f06540​​b64fcb

请求方法:GET

状态代码:200 OK

请求标题

接受:/ Accept-Charset:ISO-8859-1,utf-8; q = 0.7,*; q = 0.3

Accept-Encoding:identity; q = 1,*; q = 0

接受语言:EN-US,EN; Q = 0.8

连接:保持活跃

饼干:的sessionId = 5616fde4-50af-43d6-a57c-f06540​​b64fcb

主持人:本地主机:8443

User-Agent:Mozilla/5.0(Windows NT 6.1; WOW64)AppleWebKit/535.19(KHTML,类似Gecko)Chrome/18.0.1025.168 Safari/535.19

查询字符串Parametersview URL编码

的sessionId:5616fde4-50af-43d6-a57c-f06540​​b64fcb

响应标题

缓存控制:私人

内容长度:1588816 …

使用getUserMedia我可以从客户端的网络摄像头/摄像头捕获视频流.使用video标签我可以在客户端的浏览器上显示它.码:

<video autoplay></video>

<script type="text/javascript">
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var video = $('video')[0];

    var failed = function(e) {
        console.log('Denied!', e);
    };

    if( navigator.getUserMedia ) {
        navigator.getUserMedia( {video: true, audio: true}, function( stream ) {
                video.src = window.URL.createObjectURL(stream);
            }, failed
        )
    } else {
        console.log( 'Not supported!' );
    }
</script>

现在是否可以将此视频流作为实时源或用户完成录制并决定上传后发送到服务器？

我找到了一些例子:

• 通过websocket将二进制映像发送到服务器
• 定期捕获流视频帧并将其作为图像发送

据称,<video>tag属性webkit-playsinline可以防止默认转到HTML5视频的全屏行为.

我将此属性添加到我的视频标签中,并在iOS6 iPhone上检查了移动版Safari和Chrome,但它不起作用.视频仍然全屏显示.这类似于两年前SO所描述的其他经历.

截至2013年6月13日的移动浏览器有哪些功能webkit-playsinline？

我有一个本地视频文件(一个.avi,但可以转换),我想展示一个客户端(即它是私人的,不能发布到网络上),但我无法弄清楚如何在IPython笔记本中播放它.

经过一番谷歌搜索后,似乎HTML5视频标签可能就行了,但我不知道任何HTML,也无法让它发挥.

关于如何嵌入这个的任何想法？

刚刚更新到Xcode 7和iOS 9 SDK,在UIWebview中播放HTML 5视频时发现了一个问题.代码非常简单,只需在UIWebview中加载HTML代码并播放即可.HTML代码包括用于播放捆绑中的视频文件的标签.在iPhone上测试时,视频可以在全屏模式下正常播放(默认情况下),但Xcode控制台会显示错误消息的长列表:

UIWebviewVideoTest [22503:904174]无法同时满足约束.可能至少下列列表中的一个约束是您不想要的约束.试试这个:(1)看看每个约束并试着找出你不期望的东西; (2)找到添加了不需要的约束或约束的代码并修复它.(注意:如果您看到您不理解的NSAutoresizingMaskLayoutConstraints,请参阅UIView属性的文档translatesAutoresizingMaskIntoConstraints)

(

 "<NSAutoresizingMaskLayoutConstraint:0x7f8df9da8ed0 h=-&- v=-&- _UIBackdropContentView:0x7f8dfc034370.width == _UIBackdropView:0x7f8df9c4ec70.width>",
"<NSLayoutConstraint:0x7f8df9d974e0 H:|-(14)-[UILabel:0x7f8df9c45b40'Slide your finger down to...']   (Names: '|':_UIBackdropContentView:0x7f8dfc034370 )>",
"<NSLayoutConstraint:0x7f8df9d96900 H:[UILabel:0x7f8df9c45b40'Slide your finger down to...']-(14)-|   (Names: '|':_UIBackdropContentView:0x7f8dfc034370 )>",
"<NSLayoutConstraint:0x7f8df9d835c0 H:|-(0)-[_UIBackdropView:0x7f8df9c4ec70]   (Names: '|':UIView:0x7f8df9c52bf0 )>",
"<NSLayoutConstraint:0x7f8df9d83610 H:[_UIBackdropView:0x7f8df9c4ec70]-(0)-|   (Names: '|':UIView:0x7f8df9c52bf0 )>",
"<NSLayoutConstraint:0x7f8df9d83910 H:|-(0)-[UIView:0x7f8df9c52bf0]   (Names: '|':AVAlphaUpdatingView:0x7f8df9c44190 )>",
"<NSLayoutConstraint:0x7f8df9d83960 H:[UIView:0x7f8df9c52bf0]-(0)-|   (Names: '|':AVAlphaUpdatingView:0x7f8df9c44190 )>",
"<NSLayoutConstraint:0x7f8df9daf950 'UIView-Encapsulated-Layout-Width' H:[AVAlphaUpdatingView:0x7f8df9c44190(0)]>"

)

将试图通过打破约束来恢复

<NSLayoutConstraint:0x7f8df9d96900 H:[UILabel:0x7f8df9c45b40'Slide your finger down to...']-(14)-|   (Names: '|':_UIBackdropContentView:0x7f8dfc034370 )>

在UIViewAlertForUnsatisfiableConstraints上创建一个符号断点,以便在调试器中捕获它.在列出的UIView上的UIConstraintBasedLayoutDebugging类别中的方法也可能有所帮助.

当我在iPad上测试时,内联播放模式正常,但在全屏模式下播放视频时,控制台中会显示类似的错误.似乎该错误与UIWebview中的全屏视频播放相关联.有谁知道为什么会生成此错误消息以及如何避免它？谢谢!

如何最好地检测浏览器的HTML5视频元素是否支持自动播放？

例如,在当前的iOS Safari上,禁用了自动播放.

更新:我现在设计的网页无论是否支持自动播放,它都能正常工作.现在,当加载页面时,将显示初始化视频.在iPad上,向用户显示一个大的播放按钮.触发播放后,视频将被隐藏.之后,可以通过JavaScript控制视频播放器的播放,这是我实际需要的.

我正在尝试镀铬金丝雀19的新功能和令人兴奋的功能.

我基本上可以从网络摄像头抓取视频并将其设置为视频标签的源元素.

<!DOCTYPE html>
<html>
    <head>
    <title>Camera capture</title>
    <script>
        var localStream;
        var localStreamObjUrl;
        window.onload = function() {
            navigator.webkitGetUserMedia("audio, video", gotStream);
        }
        function gotStream(stream) {
            localStream = stream;
            localStreamObjUrl = webkitURL.createObjectURL(localStream);
            var video = document.getElementById("selfView");
            video.src = localStreamObjUrl;
        }
    </script>
</head>
<body>
    <video id="selfView" autoplay audio=muted></video>
</body>
</html>

从https://apprtc.appspot.com上的示例中,我们可以获取视频并将其流式传输给对等...

我的问题是,我可以避免进行所有遍历以获得p2p连接并直接将视频上传到服务器？我希望能够转发视频流而不是发送它p2p.

如果可能的话,如何使用VLC将mp4转换为webm？我应该选择哪种编解码器？我需要重新编码声音吗？

我正在尝试将html5视频放在一个闪存作为后备的网站上.据我所知,它是Firefox允许的唯一格式(webm)(除非你在Windows 7 64bit上？).Theora似乎工作,但从我的理解它有点旧,也需要一段时间才能正确渲染图片并且不提供缩略图:(

<video controls width="500">  
    <!-- if Firefox -->  
    <source src="video/45-theora.ogg" type="video/ogg" />
    <!-- if Safari/Chrome-->  
    <source src="video/45.mp4" type="video/mp4" />
</video>

哦,我在Mac OS Lion上,但如果它让某人更容易,我可以访问Windows 7,Vista和XP.

谢谢你的帮助!

实际上,我有一个带有JavaScript功能的HTML5页面,允许我播放一个wmv视频文件.我需要在播放视频时(暂停或不播放)拍摄快照,并以任何图像格式保存JPG或BMP.任何帮助将不胜感激.谢谢.

<!DOCTYPE HTML>

    <html>
        <head>
            <title>HTML5 video</title>        
    <script type="text/javascript">
        function checkPlay() {
            var myVideo = document.getElementById("myVid");
            var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>';
            try {
                var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv");
                if ((canPlay == "no") || (canPlay == "")) {
                    myVideo.innerHTML = ytStr;
                }
                new MediaElement(v, { success: function (media) { media.play(); } });
            } catch (err) {
                myVideo.innerHTML = ytStr;
            }
        }
    </script>
        </head>
        <body onload="checkPlay()">
          <div id="myVid"/>

      </body>
    </html>

我使用以下HTML5和JQuery代码来播放其URL位于数组URLArray []中的视频播放列表.

function NextFrag(){

 if (index < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

我们知道所有手机都禁用了HTML5的自动播放功能,因此我必须在手机上手动播放每个视频片段.这绝对是我不想要的.

我真的想知道替代方案.我真的很感兴趣的代码段,我可以包括自动播放,而不涉及用户进行交互.

是否可以将其转换为Android应用程序才能工作.我真的需要让它像播放列表一样工作,我不关心如何,我只需要这个功能.

请帮忙.