媒体元素

一、HTML5新增的两个与媒体相关的标签<audio>和<video>，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容

1、使用这两个标签时，至少要包含的属性有：src——只想要加载的媒体文件；width和height——指定视频播放器的大小；poster（可选）属性——指定图像的URL可以在加载视频内容期间显示另一幅图像；

2、位于开始和结束标签之间的内容为浏览器不支持这两个媒体元素时的显示内容；

3、可以指定多个不同的媒体来源，为此不用在标签中指定src属性，而是使用一个或多个<source>元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Note: This example uses an OGG Theora video, which is supported in Firefox, Chrome, and Opera.</code>
    <div class="mediaplayer">
        <div class="video">
            <video id="player" src="http://people.mozilla.com/~prouget/demos/resources/videos/billyBrowsers.ogg" poster="mymovie.jpg"
                   width="300" height="200">
                Video player not available.
            </video>
        </div>
        <div class="controls">
            <input type="button" value="Play" id="video-btn">
            <span id="curtime">0</span>/<span id="duration">0</span>
        </div>
    </div>

    <script>
        window.onload = function(){

            // 取得对元素的引用，分别有player,btn,curtime,duration
            var player = document.getElementById("player");
            var btn = document.getElementById("video-btn");
            var curtime = document.getElementById("curtime");
            var duration = document.getElementById("duration");

            /* 更新播放时间，不知道为什么这样设置，但是这样设置会使id为duration的span呈             现的有html中的e变为NAN
             */
            duration.innerHTML = player.duration;

            // 为按钮添加事件处理程序
            EventUtil.addHandler(btn, "click", function(event){

                if (player.paused){
                    player.play();
                    btn.value = "Pause";
                } else {
                    player.pause();
                    btn.value = "Play";
                }
            });

            // 通过setInterval设置计时器，定时更新当前时间
            setInterval(function(){
                curtime.innerHTML = player.currentTime;
            }, 250);

        };

    </script>
</body>
</html>

 

posted @ 2017-04-17 08:35  FernLi  阅读(309)  评论(0)    收藏  举报