音频的使用和插入以及动态文字的使用

大多数音频是通过加载插件来播放音频的文件的,常用的是flash。但是并不是所有的浏览器都拥有同样的插件。为此和HTML4相比,HTML5中新增了audio标签。规定一种包括音频的方法。

audio标签概述:只要定义播放声音文件和音频流的标准。支持三种音频格式,分别为ogg,mp3,Wav。

在HTML5中播放音频,代码如下:

<audio src=”song.mp3” controls=”controls”>

</audio>

Controls属性是属性供添加播放,暂停和音量控件。在<audio>浏览器不显示</audio>

Audio常见属性


属性



描述


Autoplay


Autoplay(自动播放)


如果出现该属性,音频在就绪后马上播放


Controls(控制)


如果出现该属性,则向用户显示控件,如按钮


Loop(循环)


如果出现该属性,每当音频结束后自动播放


Preload(加载)


如果出现该属性,预播放


url(地址)


要播放音频的url地址


autobuffer


Autobuffer(自动缓冲)


缓冲

另外可以用audio标签通过source添加多个音频文件

<audio controls=”controls”>

<source scr=”222.mp4” type=”audio/mp3”>

<source scr=”111.mp3” type=”audio/mp3”>

</audio>

网页视频标签:Video

在HTML5中播放频,代码如下:

<video src=”11.mp4” controls=”controls”>

</video>

Video属性:


属性



描述


Autoplay


autoplay


如果出现该属性,视频在就绪后马上播放


Controls


Controls


如果出现该属性,则向用户显示控件,如按钮


Loop


如果出现该属性,每当音频结束后自动播放


Preload


如果出现该属性,预播放


url


要播放视频的url地址


Width


宽度值


设置视频播放器的宽度


heigth


高度值


设置视频播放器的高度


poster


url


在视频没有加载出来时提供一个以一定比例缓冲的图片

设置背景音乐

<audio src=”111.mp3” controls=”controls”>

您的浏览器不支持audio的标签

</audio>

设置背景音乐的循环播放

<audio controls=”controls” loop=”loop”>

<sounce src=”111.mp3”>

</audio>

添加网页视频文件

<video src=”11.mp4” controls=”controls”>

您的浏览器不支持video标签

<video>

设置自动运行:

<video src=”11.mp4” controls=”controls” autoplay=”autoplay”>

</video>

设置视频窗口的宽度和高度

<video width=”500px” height=”300px” controls=”controls” >

<sounce src=”11.mp4”/>

</video>

滚动文字的应用

<marquee>aaa</marquee>

属性:direction=“left/right/up/down”

Alternate=“scroll/slide/alternate”

Scrollamount=“滚动速度/值(数字)”

Scrolldelay=“滚动延迟(数字)”

滚动循环

<marquee loop=“循环次数”>aaa</marquee>

<!-- behavior=alternate  行为alternate是来回滚动;slide是滚动一次停止;scroll是循环滚动-->

<!-- Scrollamount=50 是速度  Scrolldelay=4是延迟-->

附:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<audio src="111.mp3" controls="controls">

该浏览器不支持video标签

</audio><br/>

<audio  controls="controls" loop="loop">

<source src="111.mp3"/>

该浏览器不支持video标签

</audio>

<br/>

<video src="11.mp4" controls="controls"></video>

<video src="11.mp4" autoplay="autoplay"></video>

<video  controls="controls" loop="loop">

<source src="22.mp4"/>

该浏览器不支持video标签

</video>

<br>

<video width="200" height="150" controls="controls">

<source src="11.mp4"/>

该浏览器不支持video标签

</video>

<marquee direction="up" >我说了所有的谎</marquee><br/>

<marquee direction="left" >你全都相信</marquee><br/>

<marquee direction="down" >我爱你你却老不信</marquee><br/>

<marquee behavior=alternate>你书里的剧情</marquee><br/>

<marquee behavior=slide>我不想上演</marquee><br/>

<!-- behavior=alternate  行为alternate是来回滚动;slide是滚动一次停止;scroll是循环滚动-->

<marquee Scrollamount=50 Scrolldelay=4>因为我喜欢喜剧收尾</marquee><br/>

<marquee Scrollamount=3 Scrolldelay=40>我试过完美放弃</marquee><br/>

<!-- Scrollamount=50 是速度  Scrolldelay=4是延迟-->

<marquee width="100" height="100">的却很踏实</marquee><br/>

<marquee width="500" height="10">醒来了梦散了</marquee><br/>

</body>

</html>

时间: 2024-10-01 04:49:47

音频的使用和插入以及动态文字的使用的相关文章

CAD编辑器插入多行文字只需要几分钟

作为一个服装设计师,Miya经常接触CAD制图,用CAD进行服装加工.服装制版等.最近Miya遇到一个问题,就是不知道如何给CAD插入多行文字,平时一行一行的插入文字实在麻烦,但是快速插入多行文字该怎么做呢?这里根据Miya的问题,教大家CAD编辑器快速插入多行文字的方法. 1.请下载安装迅捷CAD编辑器http://cad.xjpdf.com/,这是一款专业的CAD编辑工具,可以满足所有CAD编辑要求,操作极其简单,这里请在软件安装完成后,点击运行. 2.打开迅捷CAD编辑器后,请在软件界面中

动态文字提示一个字一个字蹦出来的 循环执行

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> .main { width: 100%; heig

变色的动态文字

变色的动态文字,文字一边变色一边切换的效果,简单文字颜色变换,用在网页上挺不错的效果,希望大家喜欢. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>石家庄油漆</TITLE> </HEAD> <body bgcolor="#ffffff" onLoad="fa

可编辑DIV (contenteditable=&quot;true&quot;) 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

页眉插入图片,文字和页号(码)的设置

毕业设计word排版 页眉插入图片,文字和页号(码)的设置 选择插入,点击插入页眉,可以选择"空白三栏", 然后在键入的地方可以选择插入图片,中间可以输入你的页眉,最右边可以输入页码. 在最右边输入页码时,首先把鼠标放在你要输入页码的位置上,然后点击页码,选择当前位置,再选择相应的格式就可以实现在页眉上同时具有图片.文字和页码了 原文地址:https://www.cnblogs.com/notstandalone/p/12336087.html

网页设计-7.1设置动态文字

使用marquee标记可以将文字设置为动态滚动的效果. 语法:<marquee>滚动的文字</marquee> 说明:只要在标记之间添加要进行滚动的文字即可,而且可以在标记之间设置这些文字的字体,颜色等 <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="Edit

动态文字水印怎么做

水印是把一些标识信息嵌入到信息载体中,在不影响原载体内容使用的同时,为原作者提供识别的手段,进而防止被再次篡改,是一种保护信息安全和知识版权的有效方法. 说到水印,常见到纸的文件,一般常用 Word 或 pdf 编辑后打印所得,并且 offie 或 pdf 软件也有直接增加水印的功能. 像 Word 中增加水印很简单:菜单栏“设计”-“水印”(选择“自定义水印”),可以设置图片或文字类水印. 但同一个 word 只能设置一条水印内容,即只能是静态水印,不能动态生成,如上面文字水印的“文字”内为“

Word文档如何不让新插入文字的时候不删掉插入后面的文字

转自:http://zhidao.baidu.com/link?url=XjnA-ED4Q8cjOElg22yubBOLD2yMV_74pBM68aJFFILUSM1c_RkEWvmNsELZKn1U8bD6sOxCzTFu57N4Qbn7zg70-5stDZkeJfgM9NvHrBm 你可能是切换到了“改写状态”Word有两种输入状态:插入.改写默认为插入状态,即输入字符后,原有字符位置顺序后移改写状态:新输入的字符替换光标处的原有字符插入/改写切换:双击状态栏的“改写”,或按键盘的Inser

HTML中视频、音频、图标、滚动条定位、文字滚动效果、iframe的应用

1.小图标(.ico) <link></link>必须写在<head></head>里面具体格式如下: <head><link rel="shortcut icon" href="/jb51.ico" type="image/x-icon"/></head>注意:红色部分为图片的相对路径2.插入音乐 <embed></embed>必须写在&