html5视频事件参数详细

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5视频事件参数详细相关的知识，希望对你有一定的参考价值。

html5 视频对象提供了很多事件，这些事件可以帮助简化和增强网页的内容。
在此处将看到使用事件检查内容是否可用、视频播放状态以及如何在视频中监视当前播放位置的示例。

HTML代码如下：

<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="boloog" />
<meta name="format-detection" content="telephone=no" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport" />
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<title>视频事件的例子</title>
</head>
<body>   
<p>粘贴视频URL地址：</p>
<input type="text" id="videoFile" style="width: 300px;" value="http://gdzhcdn.vxinyou.com/down/video/vxinyou/ios_640x480.MP4" />
<button id="loadVideo">加载</button><br/>
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">      
    HTML5 Video is required for this example
</video>
<div id="buttonbar" style="display: none; font-size:larger;")>
    <button id="restart">重新开始</button> 
    <button id="slower">播放减慢</button>
    <button id="rew">倒回</button>
    <button id="play" title="Play button">播放</button>
    <button id="fwd">快进</button>
    <button id="faster">播放加快</button>
    <button id="mute">禁音</button>     
    <br />
    <label>复位回放速度: </label><button id="normal" title="Reset playback rate button">=</button>           
    <br />
    <label>  音量: </label>
    <button id="volDn"  title="Volume down button">-</button>
    <button id="volUp"  title="Volume up button">+</button>
    <div id="status">总时长（秒）: <span id="vLen"></span> <br />
    当前时间:  <span id="curTime" title="Current time"></span><br />
    剩余的时间: <span id="vRemaining" title="Remaining time"></span></div>
</div>   
<div id="errorMsg" style="color:Red;"></div>  
<div title="事件状态区域" >
    <label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br />
    <label>onloadstart: </label><span class="stats"  id="ls"></span><br />
    <label>onprogress: </label><span class="stats"  id="pg"></span><br />
    <label>onloadeddata: </label><span class="stats" id="ld"></span><br />
    <label>onended: </label><span class="stats" id="ndd"></span><br />
    <label>onemptied: </label><span class="stats" id="mt"></span><br />
    <label>onstalled: </label><span class="stats" id="stall"></span><br />
    <label>onwaiting: </label><span class="stats" id="waiting"></span><br />
    <label>ondurationchange: </label><span class="stats" id="dc"></span><br />    
</div>
</body>
</html>

 

JS事件代码：

var video = document.getElementById("Video1");
var vLength;
var pgFlag = ""; // 用于进度跟踪
if (video.canPlayType) { // 支持HTML5视频测试
    // 视频的按钮的辅助函数    播放视频
    function vidplay(evt) {
        if (video.src == "") { // 初始源负载
            getVideo();
        }
        if (video.paused) { // 播放文件，并显示暂停符号
            video.play();
        } else { // 暂停其他文件，显示播放符号
            video.pause();
        }
    }

    // 从输入的表单地址获取视频文件
    function getVideo() {
        var fileURL = document.getElementById("videoFile").value; // 得到输入字段                    
        if (fileURL != "") {
            video.src = fileURL;
            video.load(); // 如果HTML源元素的应用
            document.getElementById("play").click(); // 开始使用
        } else {
            errMessage("请输入有效的视频网址"); // 网址失败
        }
    }


    // 按钮帮助函数  跳过向前，向后，或重新启动
    function setTime(tValue) {
        // 如果没有视频加载，这将抛出一个异常
        try {
            if (tValue == 0) {
                video.currentTime = tValue;
            } else {
                video.currentTime += tValue;
            }
        } catch (err) {
            // 错误消息（ERR） 显示异常
            errMessage("视频内容可能无法加载");
        }
    }

    // 体积变化根据传入的值 
    function setVol(value) {
        var vol = video.volume;
        vol += value;
        // 测试范围0 - 1避免异常
        if (vol >= 0 && vol <= 1) {
            // 如果有效的值，使用它
            video.volume = vol;
        } else {
            // 在其他替代的0或1
            video.volume = (vol < 0) ? 0 : 1;
        }
    }
    // 按钮事件  播放
    document.getElementById("play").addEventListener("click", vidplay, false);
    // 重新启动
    document.getElementById("restart").addEventListener("click", function() {
        setTime(0);
    }, false);
    // 向后跳过10秒钟
    document.getElementById("rew").addEventListener("click", function() {
        setTime(-10);
    }, false);
    // 向前跳过了10秒钟
    document.getElementById("fwd").addEventListener("click", function() {
        setTime(10);
    }, false);
    // 设置 src == 最新视频文件的URL
    document.getElementById("loadVideo").addEventListener("click", getVideo, false);

    // 音量按钮
    document.getElementById("volDn").addEventListener("click", function() {
        setVol(-.1); // 下降10%
    }, false);
    document.getElementById("volUp").addEventListener("click", function() {
        setVol(.1); // 上升10%
    }, false);

    // 播放速度按钮
    document.getElementById("slower").addEventListener("click", function() {
        video.playbackRate -= .25;
    }, false);
    document.getElementById("faster").addEventListener("click", function() {
        video.playbackRate += .25;
    }, false);
    document.getElementById("normal").addEventListener("click", function() {
        video.playbackRate = 1;
    }, false);
    document.getElementById("mute").addEventListener("click", function(evt) {
        if (video.muted) {
            video.muted = false;
        } else {
            video.muted = true;
        }
    }, false);

    // 任何视频错误会失败的消息
    video.addEventListener("error", function(err) {
        errMessage(err);
    }, true);
    // 内容加载，显示按钮和设置的事件
    video.addEventListener("canplay", function() {
        document.getElementById("buttonbar").style.display = "block";
    }, false);

    // 显示视频时长时可用
    video.addEventListener("loadedmetadata", function() {
        vLength = video.duration.toFixed(1);
        document.getElementById("vLen").textContent = vLength; // 全局变量
    }, false);

    // 显示当前剩余时间
    video.addEventListener("timeupdate", function() {
        // 当前时间
        var vTime = video.currentTime;
        document.getElementById("curTime").textContent = vTime.toFixed(1);
        document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
    }, false);
    // 停下来打事件控制按钮
    video.addEventListener("pause", function() {
        document.getElementById("play").textContent = "播放";
    }, false);

    video.addEventListener("playing", function() {
        document.getElementById("play").textContent = "暂停";
    }, false);

    video.addEventListener("volumechange", function() {
        if (video.muted) {
            // 如果静音，静音imageif显示没有静音，静音的图像显示不
            document.getElementById("mute").innerHTML = "打开";
        } else {
            // 如果没有静音，静音的图像显示不
            document.getElementById("mute").innerHTML = "禁音";
        }
    }, false);
    // 下载和播放状态事件。
    video.addEventListener("loadstart", function() {
        document.getElementById("ls").textContent = "开始";
    }, false);
    video.addEventListener("loadeddata", function() {
        document.getElementById("ld").textContent = "数据加载";
    }, false);

    video.addEventListener("ended", function() {
        document.getElementById("ndd").textContent = "播放结束";
    }, false);

    video.addEventListener("emptied", function() {
        document.getElementById("mt").textContent = "视频复位";
    }, false);

    video.addEventListener("stalled", function() {
        document.getElementById("stall").textContent = "下载了";
    }, false);
    video.addEventListener("waiting", function() {
        document.getElementById("waiting").textContent = "播放器等内容";
    }, false);
    video.addEventListener("progress", function() {
        pgFlag += "+";
        if (pgFlag.length > 10) {
            pgFlag = "+";
        }
        document.getElementById("pg").textContent = pgFlag;

    }, false);
    video.addEventListener("durationchange", function() {
        document.getElementById("dc").textContent = "时间改变";
    }, false);
    video.addEventListener("canplaythrough", function() {
        document.getElementById("cpt").textContent = "准备好了整个视频";
    }, false);
} else {
    errMessage("HTML5 Video is required for this example");
    // 结束运行
}
// 显示一个错误信息

function errMessage(msg) {
    // 显示一个5秒错误消息，然后清除它
    document.getElementById("errorMsg").textContent = msg;
    setTimeout("document.getElementById(‘errorMsg‘).textContent=‘‘", 5000);
}

 

项目演示地址：点击查看

 

以上是关于html5视频事件参数详细的主要内容，如果未能解决你的问题，请参考以下文章

在 HTML5 Video 中，如何播放长视频中的小片段？

HTML5 视频加载数据事件在 IOS Safari 中不起作用

当视频更改而不重新加载页面时，HTML5 视频元素缺少 END 事件

请问怎么下载这里的视频?

html5 播放事件与视频标签中的播放事件

HTML5 视频 - 文件加载完成事件？