我写了一个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. Units of CSS

    地址:https://www.w3schools.com/css/css_units.asp https://www.cnblogs.com/xiaohuochai/p/5485683.html em ...

  2. CentOS 6.4中升级编译安装GCC 4.8.1 + GDB 7.6.1 + Eclipse 以及Kdump配置

    在CentOS 6.4中编译安装GCC 4.8.1 + GDB 7.6.1 + Eclipse 今天在isocpp上看到"GCC 4.8.1 released, C++11 feature ...

  3. redis（二）

    基本配置 在源文件/usr/local/redis目录下,文件redis.conf为配置文件 绑定地址:如果需要远程访问,可将此行注释 bind 127.0.0.1 端口,默认为6379 port 6 ...

  4. 数据结构 BM算法

    BM算法是比KMP算法更快的字符串模式匹配算法.BM算法最好情况下的时间复杂度是O(n),KMP算法最好情况下的时间复杂度是O(n+m),两者最坏情况下的时间复杂度均是O(m*n).其中,n指目标串长 ...

  5. JavaScript面向对象的三大特性

    1.JavaScript面向对象的三大特性 JavaScript的三大特性:封装性.继承性.多态性. 2.JavaScript实现封装特性 在一些静态类型的语言如java中,本身语法就提供了这些功能. ...

  6. Tips_方格拼图效果

    用原生的javascript实现方格拼图效果 1.新建文件夹 代码如下: 01.html <!DOCTYPE html> <html lang="en"> ...

  7. openstack 之~horizon部署

    第一:部署horizon环境: 安装部署memcache 安装软件包 yum install memcached python-memcached 启动memcache并且设置开机自启动 system ...

  8. JSP(3)—Cookie和Session

    HTTP是一个无状态的协议,web服务器无法分辨出那些请求是同一个浏览器发出的,浏览器每一次请求都是孤立的 即使HTTP1.1支持持续链接,但当用户有一段时间没有请求时,连接也会关闭. 如何实现网上的 ...

  9. C# WebApi+Task+WebSocket实战项目演练(四)

    一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...

  10. Css3 实现循环留言滚动效果（一）

    一.常见留言滚动效果示例 html代码 <div class="runList"> <div class="runitem"> < ...