React Native 为什么我的expo-av视频不能自动开始播放?

tgabmvqs  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(200)

bounty还有4天到期。此问题的答案有资格获得+50声望奖励。MouseWarrior希望引起更多关注这个问题。

我有一个视频,我与expo-av渲染。视频渲染效果良好,但在第一次渲染时不会开始播放。我将shouldPlay属性设置为true。我提供了一个snack example here以及下面的一些代码。如果使用零食示例,请将模拟器设置为web。

为什么视频不能自动开始播放?

<Video
        style={{width: 500, height: 300, resizeMode: 'contain'}}
        source={{
          uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        resizeMode={ResizeMode.CONTAIN}
        shouldPlay={true}
        videoStyle={{width: 500, height:300}}
      />
xzlaal3s

xzlaal3s1#

snack工作得很好。
当浏览器(chrome或Firefox)的autoplay permission阻止音频时,我确实只看到了第一帧。
但如果音频和视频都被允许,那么视频立即开始播放。

7gcisfzg

7gcisfzg2#

加上VonC给出的正确原因,我们有Autoplay policy in ChromeChromium Autoplay。自动播放策略可能因浏览器而异,但在大多数情况下,它至少需要用户交互。此外,如果音频是静音的,那么有很高的可能性自动播放。文章解释了为什么我们今天看到的大多数视频流媒体网站都是静音的原因。视频是静音的,如果浏览器支持它将自动播放,如果它不支持,那么如果用户取消静音,那么它将自动播放。
简而言之,我们必须保持音频静音,并在屏幕上放置静音/取消静音按钮。
这个演示中的样式很差,但它至少给予一个关于如何进一步进行的想法。
下面提供了代码,还有snack example

// App.js
import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, ResizeMode } from 'expo-av';
import {useEffect, useState} from "react";

export default function App() {
    const video = React.useRef(null);
    const playerButton = React.useRef(null);
    const [isMuted, setIsMuted] = useState(true);
    const [status, setStatus] = React.useState({});
    const styles = StyleSheet.create({
        container: {
            alignItems:"center",
            justifyContent: "center",
            height: "100%",
            width:"100%"
        },
        video: {
            height: "380px",
            width: "400px"
        },
        buttons: {
            display:"flex",
            width: "500px",
            flexDirection: "row",
            padding:0,
            margin:0,
            justifyContent: "flex-start",
            marginLeft:"200px"
        },
        spacing: {
          marginRight: "16px",
        }
    });

    useEffect(()=> {

    },[])

    return (
        <View style={styles.container}>
            <Video
                ref={video}
                style={styles.video}
                source={{
                    uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
                }}
                autoPlay
                useNativeControls
                resizeMode={ResizeMode.CONTAIN}
                shouldPlay={true}
                isMuted={isMuted}
                onPlaybackStatusUpdate={status => setStatus(() => status)}
            />
            <View style={styles.buttons}>
                <Button
                    style={styles.button}
                    ref={playerButton}
                    title={status.isPlaying ? 'Pause' : 'Play'}
                    onPress={() =>
                        status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
                    }
                />
                <div style={styles.spacing}/>
                <Button
                    style={styles.button}
                    ref={playerButton}
                    title={isMuted ? 'Unmute' : 'Mute'}
                    onPress={() => setIsMuted(!isMuted)}
                />
            </View>
        </View>
    );
}

相关问题