Web Developer前端

autoplay自动播放策略

2018-08-15  本文已影响4852人  谢先生的无聊生活

autoplay自动播放策略

  1. chrome66以及更高的版本不允许媒体自动播放。

  2. safari 阻止自动播放视频。

    safari阻止自动播放
  3. 出于用户体验,节省流量的考虑,移动端禁止自动播放

  4. opera 阻止autoplay

解决策略参考:
1. Chrome autoplay-policy
2. safari
3. opera autoplay

一、视频(video)

二、音频(audio)

三、音视频(audio+video)

  1. 在用户交互(点击,触摸滑动等操作)后,使用.paly()方法播放。
    注意:用户没有产生交互前调用play()会抛出异常

四、浏览器/参数设置

  1. chrome
- 设置开发者开关,更改chrome自动播放策略。
前往:**chrome://flags/#autoplay-policy**,设置 **Autoplay policy**开关。
  1. safari
- [safari官网](https://www.apple.com/cn/safari/)提示:可以进入Safari浏览器中的单个网站设置,启用媒体自动播放。

解决办法:

  1. 使用Web Audio API播放声音。
  2. 不直接使用autoplay进行自动播放。使用.play()方法播放。
    video.play()和audio.play()都返回promise。未禁止的播放完后会resolve,禁止的会reject。
    video和audio可以在用户交互(click,touch,tap等)后调用.play()播放,video还可以静音后播放。
    /**video.play()返回一个promise,未禁止则resolve,禁止则reject**/
    let video = document.getElementById("video");
    let audio = document.getElementById("audio");
    let videoPlay = video.play();
    let audioPlay = audio.play();
    
    videoPlay.then(()=>{
        console.log('可以自动播放');
    }).catch((err)=>{
        console.log(err);
        console.log("不允许自动播放");
    
        //视频元素可以选择静音后再播放,提示用户打开声音
        video.muted=true;
        video.play();
    
        //也可以在用户交互后调用.play()
        // ...
    });
    
    audioPlay.then(()=>{
        console.log('可以自动播放');
    }).catch((err)=>{
        console.log(err);
        console.log("不允许自动播放");
    
        //音频元素只在用户交互后调用.play(),
        // ...
    });
    
  3. android h5 webview
    android 4.2 webview添加了是否需要用户手势去触发音视频的播放开关,默认为true(需要用户手势触发)。
    将webview的这个开关设置为不需要用户触发:
    mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);
  4. IOS h5 webview
    IOS APP给webview设置mediaPlaybackRequiresUserAction后可以允许自动播放.
上一篇下一篇

猜你喜欢

热点阅读