video属性和事件

video 的属性和事件

1.属性

  <video id="v" controlslist="nodownload nofullscreen" controls height="500px;" poster="./a.jpg">
        <!-- <source src="./test222.mp4"> -->
        <source src="./test2.mp4">
      </video>

注意

设置默认音量时不能设置属性，需要在js 中设置，video.volume = 0.5;

2.事件

    /**
     * 当音频/视频处于加载过程中时，会依次发生以下事件： 
        1.loadstart 当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。 【当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。】
        2.durationchange 当指定音频/视频的时长数据发生变化时，会发生 durationchange 事件。
        3.loadedmetadata   当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。
        4.loadeddata 当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。
        5.progress 当浏览器正在下载指定的音频/视频时，会发生 progress 事件
        6.canplay 当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件。
        7.canplaythrough  当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。
     */


    //  1.play 
    //  2.pause

    //  3.seeking
    //  4.seeked

    //  5.waiting
    //  6.playing

    // 7.timeupdate 进度条更新

    // 8.ended 播放结束

    // 9.error 报错信息 







    // 开始加载 loadstart
    v.addEventListener('loadstart', function() {
      console.log('loadstart');
    })
    // 视频总时长变化  durationchange
    v.addEventListener('durationchange', function() {
      console.log(v.duration)
      console.log('durationchange');
    })
    // 视频元数据加载完毕 loadedmetadata
    v.addEventListener('loadedmetadata', function() {
      console.log('loadedmetadata');
    })
    // 当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。
    v.addEventListener('loadeddata', function() {
      console.log('loadeddata');
    })
    // 当浏览器正在下载指定的音频/视频时，会发生 progress 事件
    v.addEventListener('progress', function() {
      console.log('progress');
    })
    v.addEventListener('canplay', function() {
      console.log('canplay');
    })
    v.addEventListener('canplaythrough', function() {
      console.log('canplaythrough');
    })

    v.addEventListener('play', function() {
      console.log('play');
    })
    v.addEventListener('pause', function() {
      console.log('pause');
    })


    v.addEventListener('seeking', function() {
      console.log('seeking');
    })
    v.addEventListener('seeked', function() {
      console.log('seeked');
    })
    // 视频无法解码，从播放到暂停中  ??? 
    v.addEventListener('waiting', function() {
      console.log('22222222222222222222,waiting');
    })
    v.addEventListener('playing', function() {
      console.log('22222222222222222222,playing');
    })
    v.addEventListener('timeupdate', function() {
      console.log('timeupdate');
    })