In html4 When you want to insert audio and video, you must use flash

1. Video and audio understanding

1.1. Mainstream video file formats

1. MPEG-4: usually in mp4 is the extension
2. Flash video: usually in flv is the extension
3. Ogg: usually in ogv is the extension
4. webm: usually in webm is an extension
5. Audio video interleaving: usually in avi is the extension

1.2 audio format:

1. Ogg .ogg
2. MP3 .mp3
3. ACC .acc

1.3 encoder

Audio and video encoding / decoding is an algorithm used to decode and encode a specific video or audio so that audio and video can be played. The volume of the original media file is very huge. If it is not encoded, the amount of data is very amazing, and the time it takes to spread on the Internet is unbearable. If it is not decoded, The encoded data cannot be reorganized into original media resources

1. Video codec

1. H.264
2. VP8 (google open source)
3. Ogg Theora

2. Audio codec

1. AAC
2. MPEG-3
3. Ogg Vorbis

H.264: alias MPEG-4, developed by MPEG and standardized in 2003,

Of course, some codecs are protected by patents, and some are free. For example, Ogg's Vorbis audio codec and Ogg's Theora video encoder can also be tried for free. If you want to use H.264, you need to pay relevant fees

2. Basic use of video and audio

// video
<video src="Video address" controls></video>	
// audio frequency
<audio src="Video address" controls></video>

3. Video tag

3.1 Video tag properties

1. src video url address
2. Width sets the width of the player
3. Height sets the player height
4. Controls displays playback controls to the user
5. autoplay video ready to play automatically
6. muted video mute
7. loop finished playing. Do you want to continue playing the video and cycle
8. The poster loads the waiting picture
9. Does preload require preloading
10. autobuffer is set to browser buffer mode, and it is effective only if autoplay is not set

 <video 
        width="1000" 
        height="300" 
        src="./dy.mp4" 
        controls 
        Preload 
        Poster='../1.jpg'
  > Your browser does not support H5 Video label,Please upgrade your browser</video>

3.2. Video API method

1. play() starts playing the video

2. pause() stops playing the video

3. load() reloads the media (for example, changing the source for a resource)

4. Full screen:

   webkit element.webkitRequestFullScreen();
   Firefox element.mozRequestFullScreen();
   W3C element.requestFullscreen();

5. Exit full screen:
   webkit document.webkitCancelFullScreen();
   Firefox document.mozCancelFullScreen();
   W3C document.exitFullscreen();

3.3. Video API properties

1. currentTime: the time (in seconds) from the start of playback to the present
2. duration: total media time (read only)
3. Volume: volume relative value of 0.0-1.0
4. muted: Mute false /true
5. Paused: whether the media is paused (read-only)
6. ended: whether the media has finished playing (read-only)
7. Error: the error code (read-only) is returned when a media error occurs
8. currentSrc: returns the media address as a string (read-only)
9. poster: preview picture before video playback (read / write)
10. videoWidth, videoHeight: the actual size of the video (read-only)

btn.onclick = function () {
    box.innerHTML = `
        Current playback time:${video.currentTime}<br/>
        Total time:${video.duration}<br/>
        volume:${video.volume}<br/>
        Mute:${video.muted}<br/>
        Pause:${video.paused}<br/>
        Is the playback complete:${video.ended}<br/>
        Is there an error:${video.error}<br/>
        address:${video.currentSrc}`;
}

3.4 . Basic events

1. Event triggered during playback of online video
2. Event triggered when onpause video pauses
3. ontimeupdate video continues to trigger events during playback
4. Event triggered when onended video playback ends
5. When the canplay video is loaded and can be played

video.onplay = function () {
    console.log('I played it')
}
video.onpause = function () {
    console.log('I paused')
}
video.ontimeupdate = function () {
    console.log('I've been playing')
}
video.onended = function () {
    console.log('I'm finished,You're coming')
}

4. audio tag

4.1 audio tag attributes

1. src URL of the audio to play.
2. Autoplay autoplay
3. Controls displays playback controls to the user
4. Loop loop
5. Does preload wait until it is loaded
6. muted mute

4.2. audio API properties

1. duration total time of music (read only)
2. currentTime current time of music (read / write)
3. Volume: absolute volume value of 0-1 (read / write)
4. Whether the end music play is finished (read only)
5. play: music playback (read only)
6. Pause: Music pause (read only)
7. Error: the error code (read-only) is returned when an error occurs in the media
8. currentSrc: returns the media address as a string (read-only)_

example:

video.volume = 0.001;

play.onclick = function () {
    if (video.paused) {
        video.play();
        this.value = 'suspend';
    } else {
        this.value = 'play';
        video.pause();
    }
};

video.ontimeupdate = nowTime;

video.oncanplay = function () {
    tolTime.value = time(video.duration);
    nowTime();
};

function nowTime() {
    curTime.value = time(video.currentTime);
    let n = video.currentTime / video.duration;
    let offset = n * (progress.offsetWidth - pro_bar.offsetWidth);
    pro_bar.style.left = offset + 'px';

    pro_bg.style.width = offset + 'px';
}

function time(cTime) {
    cTime = parseInt(cTime);
    let h = zero(Math.floor(cTime / 3600));
    let m = zero(Math.floor((cTime % 3600) / 60));
    let s = zero(Math.floor(cTime % 60));

    return h + ':' + m + ':' + s;
}

function zero(num) {
    if (num < 10) {
        return '0' + num;
    }

    return num;
}

pro_bar.ondragstart = function (e) {
    let x = e.clientX - this.offsetLeft;

    this.ondrag = this.ondragend = function (e) {
        console.log(e);
        let _left = e.clientX - x;
        if (_left <= 0) _left = 0;
        else if (
            _left >=
            progress.offsetWidth - pro_bar.offsetWidth
        )
            _left = progress.offsetWidth - pro_bar.offsetWidth;

        pro_bar.style.left = _left + 'px';
        pro_bg.style.width = _left + 'px';

        let proN =
            _left / (progress.offsetWidth - pro_bar.offsetWidth);
        window.video.currentTime = proN * video.duration;

        nowTime();
    };
};

5. Compatibility processing

Due to the different coders of browser video format, there is a compatibility problem. At this time, W3C aims to solve this problem,

Compatible processing uses the source tag

5.1 video compatibility

<video>
	<source src="./dy.mp4" type="video/mp4">
	<source src="./dy.ogg" type="video/ogg">
    Your browser does not support video label,<a href="./dy.map4">Click to download the video</a>
</video>

[video.js]

5.2 audio compatibility

<audio>
	<source src="./dy.mp3" type="audio/mp4">
	<source src="./dy.ogg" type="audio/ogg">
    Your browser does not support audio label,<a href="./dy.map3">Click to download audio</a>
</audio>

[audio.js]