• 【转】HTML <video> 标签


    HTML <video> 标签


    参考原文:

    oceanL的博客《HTML5的Video标签的属性,方法和事件汇总》 。

    感谢作者的分享!


    使用示例:

      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持 video 标签。
      </video>


    支持格式:

      支持三种视频格式:MP4、WebM、Ogg。


    音频格式的 MIME 类型:

      MP4 video/mp4
      WebM video/webm
      Ogg video/ogg


    标签属性:

      width  宽
      height  高
      autoplay  是否自动播放
      loop  是否循环播放
      muted  是否静音播放
      src  视频url
      controls  是否显示控件,播放/暂停、进度条、音量、全屏等。


    Media方法和属性:

    HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

    Media = document.getElementById("media");

    Media.error; //null:正常
    Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
    //网络状态
    - Media.currentSrc; //返回当前资源的URL
    - Media.src = value; //返回或设置当前资源的URL
    - Media.canPlayType(type); //是否能播放某种格式的资源
    - Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
    - Media.load(); //重新加载src指定的资源
    - Media.buffered; //返回已缓冲区域,TimeRanges
    - Media.preload; //none:不预载 metadata:预载资源信息 auto:

    //准备状态
    - Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
    - Media.seeking; //是否正在seeking

    //回放状态

    Media.currentTime = value; //当前播放的位置,赋值可改变位置
    Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
    Media.duration; //当前资源长度 流返回无限
    Media.paused; //是否暂停
    Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
    Media.playbackRate = value;//当前播放速度,设置后马上改变
    Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
    Media.seekable; //返回可以seek的区域 TimeRanges
    Media.ended; //是否结束
    Media.autoPlay; //是否自动播放
    Media.loop; //是否循环播放
    Media.play(); //播放
    Media.pause(); //暂停

    //视频控制

    Media.controls;//是否有默认控制条
    Media.volume = value; //音量
    Media.muted = value; //静音
    TimeRanges(区域)对象
    TimeRanges.length; //区域段数
    TimeRanges.start(index) //第index段区域的开始位置
    TimeRanges.end(index) //第index段区域的结束位置
    //相关事件

    var eventTester = function(e){
      Media.addEventListener(e,function(){
        console.log((new Date()).getTime(),e)
      },false);
    }
    eventTester("loadstart"); //客户端开始请求数据
    eventTester("progress"); //客户端正在请求数据
    eventTester("suspend"); //延迟下载
    eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
    eventTester("loadstart"); //客户端开始请求数据
    eventTester("progress"); //客户端正在请求数据
    eventTester("suspend"); //延迟下载
    eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
    eventTester("error"); //请求数据时遇到错误
    eventTester("stalled"); //网速失速
    eventTester("play"); //play()和autoplay开始播放时触发
    eventTester("pause"); //pause()触发
    eventTester("loadedmetadata"); //成功获取资源长度
    eventTester("loadeddata"); //
    eventTester("waiting"); //等待数据,并非错误
    eventTester("playing"); //开始回放
    eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
    eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
    eventTester("seeking"); //寻找中
    eventTester("seeked"); //寻找完毕
    eventTester("timeupdate"); //播放时间改变
    eventTester("ended"); //播放结束
    eventTester("ratechange"); //播放速率改变
    eventTester("durationchange"); //资源长度改变
    eventTester("volumechange"); //音量改变


    常用问题:

    (1)如何不让用户下载视频?
    答:
    1、在video标签里加controlsList="nodownload",禁止用户使用播放器的下载功能;
    2、禁止右键的【另存为】下载,就禁止右键菜单,
    document.oncontextmenu = function(){
      return false
    }

    扩展:
    nofullscreen: 不要全屏
    noremoteplayback: 不要远程回放

    (2)如何禁止快进
    答:通过timeupdate播放时间改变事件监听,每次记录上次的时间,
    如本次比上次多了超过2秒,视为快进了,
    使用Media.currentTime = value;回到原位置。

    (3)如何不要播放器右侧的三个点(里边是画中画和下载功能)?
    答:Media.disablePictureInPicture = true;


  • 相关阅读:
    断开/删除 SVN 链接(.svn)的几种方法
    Android 中 ListView 常用属性合集
    Android 中 GridView 常用属性合集
    LeetCode-387-字符串中的第一个唯一字符
    LeetCode-374-猜数字大小
    LeetCode-290-单词规律
    LeetCode-278-第一个错误的版本
    LeetCode-383-赎金信
    LeetCode-367-有效的完全平方数
    LeetCode-350-两个数组的交集 II
  • 原文地址:https://www.cnblogs.com/gyfluck/p/12345556.html
Copyright © 2020-2023  润新知