HTML5 Video

<!DOCTYPE html>
<html>
  <head>
    <title>
        Browsing the video with a seek bar
    </title>
    <style type="text/css">
        #video_container {
            margin: 0;
            padding: 0;
        }
        #time {
            margin: 0;
            padding: 5px;
            width: 350px;
            font-family: Helvetica, Arial, sans-serif
            font-size: .7em;
            color: #000000;
            background-color: #ccc;
        }
    </style>
    <script type="text/javascript">
        var video;
        window.onload = function() {
            video = document.getElementsByTagName("video")[0];
            var btn_play = document.getElementById("btn_play");
            var btn_pause = document.getElementById("btn_pause");
            var btn_mute = document.getElementById("btn_mute");
            var seekbar = document.getElementById('seekbar');
            btn_play.addEventListener('click', doPlay, false);
            btn_pause.addEventListener('click', doPause, false);
            btn_mute.addEventListener('click', doMute, false);
            video.addEventListener('timeupdate', updateTime, false);
            video.addEventListener('durationchange', initSeekBar, false);
            seekbar.addEventListener('change', changeTime, false);
            btn_volume.value = video.volume;
            btn_volume.addEventListener('change', function(e) {
                myVol = e.target.value;
                video.volume = myVol;
                if (myVol == 0) {
                    video.muted = true;
                } else {
                    video.muted = false;
                }
                return false;
            }, true);
        };
        function initSeekBar() {
            seekbar.min = 0;
            seekbar.max = video.duration;
        }
        function changeTime() {
            video.currentTime = seekbar.value;
        }
        function updateTime() {
            var sec = video.currentTime;
            var h = Math.floor(sec / 3600);
            sec = sec % 3600;
            var min = Math.floor(sec / 60);
            sec = Math.floor(sec % 60);
            if (sec.toString().length < 2) sec = "0" + sec;
            if (min.toString().length < 2) min = "0" + min;
            document.getElementById('time').innerHTML = h + ":" + min + ":" + sec;
            seekbar.min = video.startTime;
            seekbar.max = video.duration;
            seekbar.value = video.currentTime;
        }
        function doPlay(){
            if (video.paused){
                video.play();
            } else if (video.ended) {
                video.currentTime = 0;
                video.play();
            };
        };
        function doPause(){
            if (video.play){
                video.pause();
            };
        };
        function doMute(){
            document.getElementById('volume').value = 0;
            video.muted = true;
        };
    </script>
  </head>
  <body>
    <div id="video_container">
      <video width="320" height="176" src="test1.mp3"/>
    </div>
    <div id="video_controller">
      <button id="btn_play"> Play </button>
      <button id="btn_pause"> Pause </button>
      <button id="btn_mute"> Mute </button>
      <input type="range" step="any" id="seekbar">
      <label id="time">-:--:--</label>
    </div>
  </body>
</html>


### HTML5 Video 标签的用法与实例 HTML5 的 `<video>` 标签允许网页内嵌视频播放器而无需依赖第三方插件。此功能使得创建多媒体丰富的网站变得更加简单和高效[^1]。 #### 基本语法结构 最简单的形式如下所示: ```html <video> Your browser does not support the video tag. </video> ``` 为了使浏览器能够显示视频并提供基本控制按钮(如播放、暂停),可以添加 `controls` 属性以及指定视频文件的位置: ```html <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` 这里定义了一个宽度为320像素,高度为240像素的视频区域,并指定了一个MP4格式的源文件。对于支持该标签的老版本浏览器,则会显示出提示信息:“Your browser does not support the video tag.” #### 多种编码格式的支持 考虑到同浏览器可能对特定类型的媒体编解码有同的兼容情况,在实际应用中通常建议同时提供多种格式来确保跨平台一致性: ```html <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <!-- For Safari --> <source src="movie.ogg" type="video/ogg"> <!-- For Firefox, Chrome, Opera --> <source src="movie.webm" type="video/webm"><!-- For Chrome, Firefox, Opera --> Your browser does not support the video tag. </video> ``` 通过这种方式,即使某些用户的设备无法处理一种特定格式,也有可能找到另一种可接受的选择来进行正常回放。 #### 自动播放与循环设置 有时希望页面加载完成后立即自动开始播放视频,或是让视频结束后重新从头再播一次,这时可以通过增加相应的属性实现这些需求: ```html <video autoplay loop muted> <source src="demo_video.mp4" type="video/mp4"> Fallback message for unsupported browsers. </video> ``` 注意:由于许多现代移动操作系统出于节省电量考虑,默认情况下允许静音以外任何形式的自动化音频输出,因此当设置了 `autoplay` 同时常需配合使用 `muted` 来保证最佳用户体验。 #### 使用JavaScript增强互动体验 除了静态配置外,还可以借助于JavaScript动态调整视频的行为逻辑,比如监听事件触发自定义操作等: ```javascript const myVideo = document.querySelector('video'); myVideo.addEventListener('ended', function() { console.log("The video has ended!"); }); ``` 上述代码片段展示了如何捕捉到视频结束这一时刻并向开发者工具的日志窗口打印一条消息通知。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值