比木白-音频和视频

发表于 | 分类于

音频与视频

audio

原因

最近在写虎扑足球”战疫”期间,接触音频audio bgm在页面上播放、暂停和停止的功能,在react里面使用了纯的原生的元素标签,但是发现了一些问题,autoPlay属性自动播放并不能每一次刷新页面都会立即播放,而是自动播放的次数极少,后来发现原来是用户不希望在打开网页之后,自动播放视频或者音频,他们希望自己能手动选择。于是就选择了,不进行自动播放,一开始进入页面,音频是关着的,用户手动选择播放与否。

使用

harmony
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React, {PureComponent} from 'react';
import AudioBg from '../assets/audio';

 class Demo extends PureComponent {
    constructor(props) {super(props);this.audio = null;}
    
    state = {
        isPlay: false
    };
    
    /**
        用户手动选择播放与否,播放或者暂停
    */
    onClickHandler = (e) => {
        const {isPlay = false} = this.state;
        this.setState({
            isPlay: !isPlay
        }, ()=> {
            if(isPlay) {
                //音频播放
                this.audio.play();
            } else {
                //音频暂停
                this.audio.pause();
            }
        });
        //取消冒泡事件
        e.stopPropagation();
    };
    
    /**
        如果音频播放完,则将其播放的时间调至开头,再次进行播放
    */
    onEndedHandler = () => {
        this.audio.currentTime = 0;
        this.audio.play();
    };
    
    render() {
        const {onClickHandler = () => {}, onEndedHandler = () => {}} = this;
        return (
            <>
                <button onClick={onClickHandler}>点击播放/暂停</button>
                <audio src={AudioBg} 
                       loop={false} 
                       autoPlay={false} 
                       ref={refs => this.audio = refs}
                       onEnded={onEndedHandler}
                >
                </audio>
            </>
        )
    }    
 }

 export default Demo;