关闭

html中video视频播放

标签: video视频
613人阅读 评论(0) 收藏 举报
分类:
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;
    }
});
为其添加单击事件,单击时为其添加背景,并播放。









0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30063次
    • 积分:560
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    最新评论