zoukankan      html  css  js  c++  java
  • H5 video 标签 详解

    昨天使用H5  video 标签 写了视频播放   本打算参考爱奇艺的代码进行修改  发现 它是动态数据  静态页面需要拆解代码  

    我情急之下  使用了  video   整理一下笔记   后面有人用 的话 简单起来

        video兼容性

    格式IEFirefoxOperaChromeSafari
    Ogg No 3.5+ 10.5+ 5.0+ No
    MPEG 4(MP4视频格式) 9.0+ No No 5.0+ 3.0+
    WebM No 4.0+ 10.6+ 6.0+ No

                video标签属性

                    src="文件路径地址" width="宽" height="高" controls="控制条" autoplay="自动播放" loop="循环" preload="预加载" 
                    <video width="320" height="240" controls="controls">
                <!-- 同一视频的兼容性写法 -->
    <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4">
    <!-- 同一视频的兼容性写法 -->
    Your browser does not support the video tag.
    </video>

                video  js API

    方法属性事件
    play()               //播放 currentSrc play
    pause()           //暂停 currentTime  //当前时间 pause
    load()              //加载 videoWidth progress      //进度
    canPlayType    videoHeight error
      duration      //视频长度 timeupdate
      ended ended
      error abort
      paused empty
      muted emptied
      seeking waiting
      volume //声音 loadedmetadata
      height  
      width  

    注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

    视频拉伸效果

    video的css样式设置成 object-fit:'fill';

    简单的整理一下  有机会再回来完善

  • 相关阅读:
    AspNetPager分页控件
    Asp.Net MVC 路由表
    自动检测海岸线,生成海浪网格
    斜坡刷子,一种好用的地形编辑方式
    用NVPerfHud4剖析Farcry的绘制过程
    初学BSP,上一些测试数据
    让游戏通过红蓝立体眼镜展现立体效果
    没有贴图拉伸的陡峭悬崖
    刚刚做的Bloom(伪HDR)效果
    近两个礼拜地图编辑器的一些进展
  • 原文地址:https://www.cnblogs.com/qiaoxinming/p/6516576.html
Copyright © 2011-2022 走看看