HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

ゞ浴缸里的玫瑰 2022-09-20 06:04 199阅读 0赞

随着HTML5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。很恰巧的是，移动端对HTML5中的媒体标签video标签和audio标签支持的非常好。这就使HTML5在移动端很流行。

video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。两个标签的用法如下。

***HTML代码***

<video src="meng.ogg" id="myVideo">视频不支持</video>
    
    
    <audio src="long.mp3" id="myAudio">音频不支持</audio>

使用video标签和audio标签的时候，要包含src属性，指向要加载的媒体文件。还可以设置宽度(width)和高度(height)属性用来指定播放器大小。在加载视频内容期间显示一幅图像可以在poster属性指定图像的URI。另外标签中有controls属性，这个属性意味着浏览器应该显示UI控件，可以方便用户直接操作媒体。位于开始和结束标签之间的任何内容都是作为后备内容，在浏览器不支持这两种媒体元素的情况下显示。

正因为不是所有浏览器支持的媒体来源不一样，所以要用多个source标签进行分别编写。小例子如下。

***HTML代码***

<audio id="audio">
    	<source id="s1" src="meng.mp3"></source>
    	<source id="s2" src="meng.ogg"></source>
    	音频不支持
    </audio>
    
    
    <video id="video">
    	<source id="s1" src="meng.mp3"></source>
    	<source id="s2" src="meng.ogg"></source>
    	视频不支持
    </video>

支持video标签和audio标签的浏览器有Firefox 3.5+、Opera 10.5+、IE9+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。

HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)就为大家介绍完了，媒体标签在HTML5中算是得到了很好的支持，所以用的比较多。更多有关HTML5的相关知识尽在梦龙小站，感谢大家的支持。

新添加的视频播放方法

JavaScript代码

function bofangshipin(Num) {
                var u = navigator.userAgent;
                if (u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) {  //苹果
                    $("#vid" + Num).css("width", "100%");
                    document.getElementById('vid' + Num).style.display = 'block';
                    document.getElementById('vid' + Num).play();
                } else {  //安卓
                $("#vid" + Num).css({
                    "width": $(".wrapperW").width(),
                    "height": $(".wrapperW").height(),
                    "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
                });
                    document.getElementById('vid' + Num).style.display = 'block';
                    setTimeout(function () { document.getElementById('vid' + Num).play(); }, 1000);
                }
    
            }
            document.getElementById('vid' + 1).addEventListener("ended", end_playing, false);
            document.getElementById('vid' + 1).addEventListener("pause", end_playing, false);
            document.getElementById('vid' + 2).addEventListener("ended", end_playing, false);
            document.getElementById('vid' + 2).addEventListener("pause", end_playing, false);
            document.getElementById('vid' + 3).addEventListener("ended", end_playing, false);
            document.getElementById('vid' + 3).addEventListener("pause", end_playing, false);
            function end_playing() {
                document.getElementById('vid' + 1).style.display = 'none';
                document.getElementById('vid' + 2).style.display = 'none';
                document.getElementById('vid' + 3).style.display = 'none';
    
                $("#vid" + 1).css("width", "0%");
                $("#vid" + 2).css("width", "0%");
                $("#vid" + 3).css("width", "0%");
            }

HTML 代码

<video src="images/sanxing.mp4"  id="vid1" controls autoplay  style="position: absolute; z-index:100;  left: 0px; display:none" name="vid1">
         <source src="images/sanxing.mp4"></source>
      </video>

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5简介与标签

一、HTML5基本概念 1、介绍 HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾。HTML是一种标记语言，标

雨点打透心脏的1/2处/ 2024年03月23日 13:21/ 0 赞/ 63 阅读

相关 HTML5实战与剖析之媒体元素(6、视频实例)

　　HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比较多。因为手机端基本上废除了flash的独断，让HTML5当家做主人，所以对视频支持的比较好。所以今天专门

- 日理万妓/ 2022年09月20日 08:31/ 0 赞/ 189 阅读

相关 HTML5实战与剖析之媒体元素(5、音频实例)

　　之前已经介绍过了HTML5中媒体元素的相关小概念，和一些事件方法。光有一些理论基础，没有实践实例是不能充分理解的，更不太可能靠小概念来进行实际操作的。所以今天为大家奉上一个

青旅半醒/ 2022年09月20日 08:30/ 0 赞/ 186 阅读

相关 HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

　　HTML5媒体元素检测编解码器的支持情况　　虽然媒体元素可以实现音频和视频功能，但是并不是所有浏览器都支持video标签和audio标

骑猪看日落/ 2022年09月20日 06:11/ 0 赞/ 182 阅读

相关 HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

　　HTML5中的媒体元素除了拥有很多的属性之外，video标签和audio标签还可以出发很多事件和方法。这些方法监控着不同的属性的变化，这些变化有可能是媒体播放的结果，也可能

冷不防/ 2022年09月20日 06:05/ 0 赞/ 181 阅读

相关 HTML5实战与剖析之媒体元素(2、媒体元素的属性)

　　提到HTML5中的媒体元素，那咱们可有的聊了，刚刚介绍完媒体元素的用法与简介，还没介绍有关媒体元素的相关属性呢，所以今天就为大家介绍一些有关HTML5中媒体元素的相关属性。

喜欢ヅ旅行/ 2022年09月20日 06:05/ 0 赞/ 203 阅读

相关 HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

　　随着HTML5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。

ゞ浴缸里的玫瑰/ 2022年09月20日 06:04/ 0 赞/ 200 阅读

相关 HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性： src：音乐的URL preload：预加载 autoplay：自动播放 loop：循环播放 cont

缺乏、安全感/ 2022年08月26日 14:12/ 0 赞/ 356 阅读

相关 HTML5 Video和Audio

1.视频 video提供了播放，暂停和音量空间来控制视频。标签之间插入的内容是提供给不支持video元素的浏览器显示的。 video元素支持多个source元素，

Dear 丶/ 2022年08月23日 10:00/ 0 赞/ 255 阅读

相关 HTML5的video元素和audio元素兼容性

一介绍因为各浏览器对音频和视频的支持互不相同，开发者可能希望为<video>和<audio>元素指定多个媒体源，此时可以借助<source>子元素来实现。二代

忘是亡心i/ 2022年05月12日 00:40/ 0 赞/ 277 阅读