我写了一个M端播放音乐的组件，使用html5的audio标签

然后我使用watch监测currentSong

在浏览器中看到audio渲染的如下：

单独访问渲染出来的audio中url可以播放音乐，为什么调用：this.$refs.audioRef.play()方法不能播放音乐？

回答：ios? 如果是ios的话有限制。媒体的播放操作需要放在交互事件的回调函数里才能生效。

ios vue2.0使用html5中的audio标签不能播放音乐的更多相关文章

  1. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  2. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  3. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  4. 检测是否支持HTML5中的Video标签

    //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...

  5. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  6. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  7. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  8. html5中的audio和video属性和事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制 <video> 标 ...

  9. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

随机推荐

  1. IAR7.51提示秘钥无效IAR 以及 CCDebug驱动(包含win7 64bit)

    今天IAR不识别我的仿真器,然后我感觉驱动有问题,就把之前的驱动卸载了,但是按照以前的方法按章驱动(选择路径到IAR的某个目录),提示找不到驱动... 也不想重新装个IAR了,于是到CSDN上下载了这 ...

  2. 潭州课堂25班：Ph201805201 django 项目 第二十六课 docker简介 (课堂笔记）

    官方文档: https://docs.docker.com/install/linux/docker-ce/ubuntu/#set-up-the-repository 1,更新下sudo apt-ge ...

  3. React性能优化记录（不定期更新）

    React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...

  4. Dell Venue 8 Pro启动盘UEFI模式32位启动，备份系统

    进入微PE工具箱官方下载页面:http://www.wepe.com.cn/download.html,选择Win8PE 32位 V1.2版下载. 或者直接百度盘下载:https://pan.baid ...

  5. 考前停课集训 Day4 雷

    Day 4 今天Rating掉了两百多 为什么呢 因为是真实力打的 倒数第三 没什么好说的了 这才是我的真实水平 强的人一如既往强 作弊的人一落千丈. 只有我.是的,只有我. 被老师嘲讽了,哎,您真的 ...

  6. Android笔记--LinearLayout

    LinearLayout 即线性布局,让子元素水平或垂直的排列在 layout中,子元素不会换行,当排到末尾时,剩下的组件将不会被显示出来. LinearLayout 常用的属性及方法: XML属性 ...

  7. java第二周的作业

    package java第二周学习; import javax.swing.JOptionPane; public class 数学题 { private int a; private int b; ...

  8. dedecms在后台替换文章标题、内容、摘要、关键字

    dedecms在后台替换文章标题.内容.摘要.关键字所在的字段为: 后台替换文章内容 数据表:dede_addonarticle 字段:body 后台替换文章摘要内容 数据表:dede_archive ...

  9. __getitem__函数

    主要是为了探究第三行为什么打印出很多提示信息,然后探究了下为什么有第三行这种写法,是因为 这个类中定义了def __getitem__(self, query),这样就可以类似于list那种用法了.但 ...

  10. python之编程风格

    第一:语句和语法 #   表示注释掉的内容 \    续行 print("yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy\ yyyyyyyyyyyyyyyyyyyyy ...