广告位联系
返回顶部
分享到

html网页添加音乐视频的实现

HTML/Xhtml 来源:互联网搜集 作者:秩名 发布时间:2020-04-20 11:45:11 人浏览
摘要

1.video标签 支持firefox自动播放 谷歌、ie不支持自动播放 video controls=controls autoplay=autoplay name=mediasource src=./img/music.mp3 type=audio/mpeg/video 谷歌可以通过添加 muted 通过静音来实现自动播放 video controls=controls autoplay=auto

1.video标签

支持firefox自动播放 谷歌、ie不支持自动播放

<video controls="controls" autoplay="autoplay" name="media"><source src="./img/music.mp3" type="audio/mpeg"></video>

谷歌可以通过添加 muted 通过静音来实现自动播放

<video controls="controls" autoplay="autoplay" name="media" muted><source src="./img/music.mp3" type="audio/mpeg"></video> 

原理就是大多数浏览器在都支持静音的视频播放
 

<video controls="controls" autoplay="autoplay" name="media" muted><source src="http://vjs.zencdn.net/v/oceans.mp4" type="audio/mpeg"></video>

2.audio标签

注意:标签定义声音,比如音乐或其他音频流。

<audio controls="controls" ><source src="./img/music.mp3"></audio>

注意:只能音乐不能加载视频

3.embed

可以支持多种播放器

自动播放支持安卓,不支持ios,支持谷歌 ie ie edge 不支持firefox

<embed src="./img/music.mp3" hidden="true" autostart="true" loop="true">
<embed src="http://vjs.zencdn.net/v/oceans.mp4"  autostart="true" loop="true"> 

补充说明:

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 <audio autopaly> <video autoplay>在桌面版浏览器也将失效。

谷歌说明:
可自动播放例外条件:上面我们已经提到如果视频本身已经被设置为静音的情况下,那么浏览器将不会再拦截其加载进行自动播放。同时如果用户此前点击过自动播放的话那么下次再访问同样的网站,那么浏览器默认情况也不会拦截其播放,而在移动设备上如果用户选择将网站添加到主屏幕上也就是经常访问的网站,这种情况下同样可以自动播放。
最后:根据谷歌统计数据如果网站视频被大量播放例如视频网站,这种情况下也不会被拦截掉自动播放功能


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/web/721081.html
相关文章
  • HTML静态页面获取url参数和UserAgent的实现代码

    HTML静态页面获取url参数和UserAgent的实现代码
    接技术支持小伙伴信:有用户反馈app在华为设备上下载不了,以为是服务器覆盖的范围不够或服务器挂了,直到另一个客服同事发来一个录
  • html网页引入svg图片的4种方式总结
    web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
  • html中两种获取标签内的值的方法介绍
    获取标签中value的值 使用的javascript获取,所以肯定是包含在 script 标签里的,也需要引入jquery 标签示例: 1 input id=goodsCount type=text size=2 re
  • HTML基本元素标签介绍

    HTML基本元素标签介绍
    一、什么是HTML HTML(Hypertext Markup Language):即超文本标记语言,是一种用来设计网页的标记语言,用该语言编写的文件,以.html或.htm为后缀
  • HTML中的表格元素介绍

    HTML中的表格元素介绍
    表格元素的作用:用来格式化显示数据。 一、表格的基本结构 表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
  • HTML中的表单元素介绍

    HTML中的表单元素介绍
    表单元素概述 表单(Form),用于收集用户信息、提交用户请求等 处理过程 1、设计表单,并放入一些输入域 2、网站访问者在自己的计算机
  • HTML怎么设置下划线?html文字加下划线方法

    HTML怎么设置下划线?html文字加下划线方法
    HTML中的下划线曾经是将文本包含在u/u标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS。一般来说,下划线被认为是引
  • 关于HTML编码导致的乱码问题介绍

    关于HTML编码导致的乱码问题介绍
    今天一个学弟问了一个问题,它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹,打开一看,很简单
  • 纯html+css实现Element loading效果的代码

    纯html+css实现Element loading效果的代码
    这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下! 分析 动画由两部分组成: 蓝色的弧线由点伸展成一个圆,又从圆收缩成
  • HTML+CSS实现导航条下拉菜单的代码

    HTML+CSS实现导航条下拉菜单的代码
    代码中的图片可以自己换的 下拉菜单HTML代码 header class=header div class=header_left img src=img/logo.jpg /div div class=header_right div class=number_right img src
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计