加金开发 2022-09-12 06:41 采纳率: 71.4%
浏览 114
已结题

vue js html5中audio 自动播放音频(兼容ios)

说明:
**
涉及:
vue js html5中audio 自动播放音频
目的:
手机端,兼容ios
打开https链接就播放。**

//失败 代码
<template>
    <div class="main">
        <audio
        :src="video"
        ref="audio"
        id="eventAudio"
        controls="controls"
        autoplay="autoplay"
      />
      </div>
</template>
<style lang="less" scoped>

</style>
<script>
export default {
    data(){
        return{
            video:'',
        }
    },
    mounted(){
        document.addEventListener('click',this.audio_but(),false)
    },
    methods:{
        audio_but(){
        var that = this;   
        let audio;
        audio = document.getElementById("eventAudio");
        that.video="https://xb.api.mytext.world/uploads/xb/MP3/1.mp3"
        console.log("开始播放---》audio===================="+audio);
        audio.paly;
        if(audio.ended){
          console.log("播放完成---》audio===================="+audio);
          that.video=''
          that.$refs.audio.src=''
        }else{
          console.log("播放还没完成---》audio===================="+audio.ended);
        } 
    },
    },created(){

    }
}
</script>

展开全部

  • 写回答

5条回答 默认 最新

  • 烟的味道 2022-09-12 06:48
    关注
    评论
  • 小鱼程序员 2022-09-13 04:46
    关注

    这不是很简单的事情,网易云自带创建外链,你在用v-for循环不就完事了?
    我就按照你这样想的,你仔细看一下mdn关于播放器的语法结构,你是不是少了参数,之类的,而且一般播放器也不是手动整出来的,可以动态创建的。和表格一样!

    评论
  • web修理工 2022-09-13 06:55
    关注

    1.audio 标签没有点击的话是不能自动播放的内容
    2.打开标签点击,在当前页面监听它,进行播放,如果是跳转页面是没有办法做到的

    评论
  • hellosm 2022-09-13 08:33
    关注

    苹果目前无法自动播放,需要先触碰屏幕(苹果要求的,必须要有用户用手指或者鼠标点击过屏幕,才能使用js播放)

    评论
  • Haven55555 2022-09-13 09:59
    关注

    理论上是可以js模拟点击触发,但如果客户端被限制了 就不行了

    评论
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 9月19日
  • 修改了问题 9月12日
  • 修改了问题 9月12日
  • 创建了问题 9月12日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部