标签: html5-video

使用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).

什么是正确的?我需要这三个吗?

ogg html5-video webm

33
推荐指数
2
解决办法
3万
查看次数

在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>
Run Code Online (Sandbox Code Playgroud)

html css html5 css3 html5-video

33
推荐指数
4
解决办法
12万
查看次数

寻求html5视频中的一点

是否有可能寻找html5 video网页中显示的特定点?我的意思是,我可以输入一个特定的时间值(比方说01:20:30:045)并让玩家控制(滑块)移动到该点并从那一点开始玩吗?

在旧版本的mozilla中vlcplugin我认为这可以通过方法实现seek(seconds,is_relative)..但我想知道这是否可以在html视频中使用.

编辑:

我创建了带有视频的页面,并添加了如下所示的javascript.当我点击链接时,它会显示点击的时间..但它不会增加播放位置..但继续正常播放.

视频播放位置不应该更改吗?

HTML

<video id="vid" width="640" height="360" controls>
       <source src="/myvid/test.mp4" type="video/mp4" /> 
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span> 
</p>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

$(document).ready(function(){
    var player = $('#vid').get(0);
    $('#gettime').click(function(){
            if(player){
                current_time=player.currentTime;
                $('#showtime').html(current_time+" seconds");
                player.currentTime=current_time+10;
            }
        });
}
);
Run Code Online (Sandbox Code Playgroud)

seek html5-video

32
推荐指数
2
解决办法
4万
查看次数

视频100%宽度和高度

我有一个视频,我想要它填充100%的宽度和100%的高度.并保持纵横比.

是否有可能它至少填充100%?如果视频的某些部分必须在屏幕之外以保持宽高比,那无关紧要.

HTML:

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>
Run Code Online (Sandbox Code Playgroud)

CSS:

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }
Run Code Online (Sandbox Code Playgroud)

html css fullscreen html5-video

32
推荐指数
9
解决办法
12万
查看次数

有没有办法在HTML5视频上使用DRM?

由于Flash正在失势,我想知道是否有办法用DRM保护html5视频(H264,.ogg和WebM).

html5 drm html5-video

31
推荐指数
2
解决办法
3万
查看次数

如何检查浏览器是否支持HTML5文件上传(FormData对象)?

如何检查浏览器是否支持HTML5文件上传(FormData对象)?

var fd = new FormData();
Run Code Online (Sandbox Code Playgroud)

根据这篇文章的回答,但代码没有返回关于浏览器的正确答案,

window.onload = function()
{
 if (!!window.FileReader)
 {
  alert('supported');
 }
 else
 {
  alert('not supported');
 }
}


Firefox - supported
Chrome - supported
Opera - supported
Safari - not supported
IE9 - not supported
Run Code Online (Sandbox Code Playgroud)

但正确的浏览器支持应该是,

Firefox - supported
Chrome - supported
Opera - not supported
Safari - supported
IE9 - not supported
Run Code Online (Sandbox Code Playgroud)

我已经测试了Opera上的html 5文件上传,但它无法确定.

我相信safari 支持html 5文件上传.

javascript safari opera file-upload html5-video

31
推荐指数
3
解决办法
5万
查看次数

在html5视频结束时执行功能

我有一个HTML视频,我想在视频结束时运行一个功能.我尝试过以下但我什么都没得到:

$(document).ready(function(){

    $('video').live('ended',function(){

        alert('video ended');

    });

});
Run Code Online (Sandbox Code Playgroud)

任何想法为什么这不会在视频结束时触发?或者我没有提供足够的信息来回答这里的任何问题?

注意:我正在使用live()函数而不是on(),因为需要使用此项目的jQuery 1.7.

jquery html5 html5-video

31
推荐指数
5
解决办法
7万
查看次数

可以使用Amazon S3/CloudFront和HTML5播放器流式传输视频吗?

我想使用HTML5视频播放器并流式传输视频.S3/CloudFront可以实现吗?我了解亚马逊使用RTMP流媒体协议,而HTML5的video标签不支持RTMP.有没有办法用HTML5播放器流式传输视频?

html5 rtmp amazon-s3 video-streaming html5-video

31
推荐指数
2
解决办法
2万
查看次数

HTML5视频的图片占位符后备广告

我正在使用以下代码在页面上实现HTML5视频

<video autoplay>
    <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
Run Code Online (Sandbox Code Playgroud)

这很好用,嵌入在FF,Safari和Chrome的页面上.我喜欢什么,因为这个视频没有控制,并且意味着嵌入在没有边框的页面中(视频中的白色BG)是要有一个图像代替视频.

如果无法使用元素渲染视频,我想将图像作为后备.我看过以下帖子:html5视频后备建议(没有闪存)开始讨论.但不确定这些答案是否是我所需要的.

我的直觉告诉我,我可以让JQuery检测视频功能,如果不支持视频,那么写出一些显示图像的HTML.但是我想看看是否有更简单的东西.

video html5 html5-video

30
推荐指数
1
解决办法
7万
查看次数

在Android和IOS上加载了什么h.264格式?

从理论上讲,IOS和ANDROID都会播放h.264文件,但我无法找出对它们进行编码的设置,因此它们实际上可以跨平台工作.有人知道如何使用一个文件对Android和IOS进行编码吗?

ps我知道关于html5视频和后备源的所有内容,我只是不想为每个下来的派克设备编码和托管新视频.

iphone android ffmpeg h.264 html5-video

29
推荐指数
2
解决办法
2万
查看次数