html中video视频播放

原创 2016年08月30日 17:28:35
1. ——video——
video元素

局部属性
autoplay,preload,controls,loop,poster,width,height,muted,src

1.1 preload预先加载视频

preload="auto"  默认请求

preload="metadata" 用户开始播放之前只能载入视频的元数据

preload="none"播放之前不会载入视频  

1.2 指定视频来源
目前还没有哪一种视频格式被普遍支持,如果想将视频推向各种各样的HTML5用户,就要做好以多种格式编码视频的准备。
一个不幸的事实是,没有哪一种格式能够用于所有的主流浏览器。因此,必须以多种格式编码视频,直到出现同一一种格式为止。可以使用source元素来指定多个格式。
source元素

允许具有的父元素
video, audio
局部属性
src,type,media
<video width="100%" id="videobg" src="img/video-before.mp4" x-webkit-airplay webkit-playsinline loop>
    <source src="img/video-before.mp4"   type="video/mp4">
    <source src="img/video-before.webm" type="video/webm">
    <source src="img/video-before.ogg"   type="video/ogg">
</video>

2. ——audio——
audio元素

局部属性
autoplay,preload,controls,loop,poster,muted,src
PS: audio和video元素的相似度是如此之高,以至于它们唯一区别仅仅是在屏幕上占据的空间大小。audio元素不会占用一大块屏幕空间来显示视频图像。事实上,甚至可以用audio元素来播放视频文件(当然,这么做只能听得到配乐),也可以用video元素来播放音频文件(不过视频显示区域会保持空白)。这看起来很奇怪,但其实是可行的。


解决iphone中,视频播放时自动在新窗口打开
<video src="video.mp4" x-webkit-airplay webkit-playsinline>

一、首先查看canvas与video的兼容性
canvas与video兼容性除了Opera Mini有区别外,其它兼容性相同。
所以需要检查.mp4格式的兼容性。


大概运行机制:
1. 第97张图片前用的是帧动画(219),97之后用的是视频播放。
2. 页面是用canvas绘制帧图片播放的,通过播放到哪张图片,显示相应的文字,并结合video相应的隐藏;
页面中如果没有video帧动画会照常播放,只不过是不会隐藏相应的文字;
2.给页面添加video视频播放,为其添加touchstart, touchend事件(h:34),根据要求在某个时间执行暂停与显示与隐藏相应的文字。

之下:

在Firefox中.mp4格式报错,于是乎查:


二、既然兼容性差别不大,但又无法解码,所以需要检查.mp4格式的兼容性。
Video 
       Firefox :支持Ogg Theora格式和WEBM (不支持.mp4)
  Opera :支持Ogg Theora格式和WEBM 
  Safari :支持MP4 
  Chrome :支持Ogg Theora格式,MP4和WEBM 
  Internet Explorer 9 :支持MP4和WEBM(需要安装插件) 
  IOS :支持MP4 
  Android :支持MP4和WEBM(Android 2.3版本以上) 
 为了支持上述所有的浏览器,建议使用WebM和MP4视频文件作为source元素。例如。

  Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件)。
为 什么是部分MP4呢?MP4有非常复杂的含义(见http://en.wikipedia.org/wiki/Mp4),普通人对MP4的理解是后缀 为.mp4的文件。但MP4本身不是一种简单的视频格式,它是一个包装了视频和音频格式的壳。至于里面的视频和音频使用什么编码格式是可变的。MP4的视频格式可以使用DivX也可使用H264,Chrome只支持H264
然后,我猜测问题的原因是这样的:Chrome浏览器见到MP4后缀的文件,使用了原生HTML5视频播放起播放,但却发现视频格式无法解码。对于Firefox,它不支持原生播放MP4,于是使用了Flash,绝大部分的视频格式基本都可通过Flash播放。
这 篇2011年1月的消息提到Google将放弃对H264的支持:http://www.infoq.com/cn/news/2011/01 /chrome-h264。这篇是Google方面的描述:http://blog.chromium.org/2011/01/html-video- codec-support-in-chrome.html。如果Google不再支持在Chrome上原生播放MP4,那么会调用Flash播放器播 放,这样反而不会出现有些MP4文件播放不了的问题。
为什么Chrome不支持所有的视频编码格式?绝大部份的视频编码格式都是要付版权费的,Google已经为H264买了单,Firefox没有Google那么有钱不愿意买。


解决方案:使用“格式工厂”转码  或者  

Free Video Compressor进行转码并压缩

转码前:

video-before.mpr是没有转码格式的视频

<video width="100%" id="videobg" src="img/video-before.mp4" x-webkit-airplay webkit-playsinline loop>
    <source src="img/video-before.mp4" type="video/mp4">
</video>

会报无法被解码。


转码后:
<video width="100%" id="videos"  poster="img/1.jpg" src="img/video-after.mp4" x-webkit-airplay webkit-playsinline loop>
    <source src="img/video-after.mp4" type="video/mp4">
</video>
poster=""是视频播放时默认显示的图片:



错误不存在了,视频可以播放了。


三、使video视频自适应窗口宽高

动态改变video宽高:
var video=document.getElementById("videos");
video.width=window.innerWidth;
video.height=window.innerHeight;

在家有没有发现即使是给video定义宽度,自适应屏幕,然视频也不到边的情况。
标签上width,height属性分别为屏幕宽高,但视频还是不能完全全屏并贴边展示。


解决方案:
 video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: cover;


四、类似微信里的视频播放
先自动播放,单击时全屏播放

<video data="1" width="100%" height="100%" id="videobg" src="js/video1.mp4" poster="img/1.jpg" autoplay x-webkit-airplay="true" webkit-playsinline="true">
</video>

var video = document.getElementById("videobg");
var data=document.getElementById("videobg").attributes[0].value;
$("#wrap-video").click(function(){
    if(data == 1){
        $("video").attr("controls",null); 
        $("video").addClass("videoplay");
        $("#p").addClass("rgba");
        video.currentTime=0;
        video.play();
        data = 0;
    }else if(data == 0){
        $("video").removeClass("videoplay");
        $("#p").removeClass("rgba");
        video.currentTime=0;
        video.play();
        data=1;
    }
});
为其添加单击事件,单击时为其添加背景,并播放。









HTML5 Video/Audio播放本地文件

这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”。 这是因为浏览器中的JavaScript不能直接直接访...
  • yl02520
  • yl02520
  • 2013年11月10日 17:42
  • 14822

[HTML5] Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg、mp4 、webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖。0x0 预备知识不...
  • soxfmr
  • soxfmr
  • 2015年03月08日 21:58
  • 9432

HTML5-video标签-实现点击预览图播放或暂停视频

刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性。这时我才真的发现到html5和css3的强大。 之前关于视频的控制更多的是运用复杂来实现,但在html5中新加...
  • pspgbhu
  • pspgbhu
  • 2016年05月17日 00:58
  • 25472

html---自定义视频播放控制台

#box{ width:500px; height:40px; back...
  • sjtu_chenchen
  • sjtu_chenchen
  • 2015年05月11日 22:33
  • 1923

使用HTML5中的Blob对象实现媒体播放功能

实现从服务器其他路径(不在webContent路径下)获取文件,并进行显示或播放的功能。其原理是,首先通过ajax请求,获取blob对象,在这个过程中就可以进行访问限制(例如,访问时检测用户是否登录等...
  • SVictorique
  • SVictorique
  • 2017年02月06日 14:32
  • 5238

给Html5视频播放器添加字幕

现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕。 往往我们还不得不通过js来做,着实是一件痛苦的事情。 现在IE10率先对HTML5...
  • hiredme
  • hiredme
  • 2015年03月05日 10:50
  • 3662

浅谈html5 video标签嵌入视频

前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致...
  • sundasheng44
  • sundasheng44
  • 2015年05月18日 16:01
  • 9987

HTML5 js控制vedio视频和分段播放

HTML5 vedio常用的js操作,包括设置,获取播放时间,播放本地视频,设置视频播放的开始和结束时间,分段播放视频等......
  • tuposky
  • tuposky
  • 2014年11月25日 20:15
  • 11432

移动端HTML5<video>视频播放优化实践

星期三 2015/01/21 23:23 评论:24条 分类:Web前端 作者: 轩枫 遇到的挑战 移动端HTML5使用原生标签播放视频,要做到两个基本原则,速度快和体验佳,先...
  • zpllwy
  • zpllwy
  • 2016年01月14日 16:28
  • 1048

使用HTML5的video标签播放视频

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传...
  • coloriy
  • coloriy
  • 2015年07月14日 14:15
  • 9940
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html中video视频播放
举报原因:
原因补充:

(最多只允许输入30个字)