在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例Box Model → Html5 播放网络视频示例 Video

Html5 播放网络视频示例 Video

Box Model

下载此实例
  • 开发语言:CSS
  • 实例大小:0.01M
  • 下载次数:33
  • 浏览次数:1121
  • 发布时间:2016-08-09
  • 实例类别:Box Model
  • 发 布 人:zg45
  • 文件格式:.html
  • 所需积分:2
 相关标签: HTML5 HTML

实例介绍

【实例简介】

【实例截图】

【核心代码】


<html >
  <head>
    <title>Video events example</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->    
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            init();
        }, false);

        function init() {        // Master function, encapsulates all functions
            var video = document.getElementById("Video1");
            var vLength;
            var pgFlag =""; // used for progress tracking
            if (video.canPlayType) {   // tests that we have HTML5 video support

                //  show the input field and load button 
                document.getElementById("inputField").style.display = "block";

                //  video button helper functions
                //  play video
                function vidplay(evt) {
                    if (video.src == "") {  // inital source load
                        getVideo();
                    }
                    if (video.paused) {   // play the file, and display pause symbol
                        video.play();
                    } else {              // pause the file, and display play symbol  
                        video.pause();
                    }
                }


                //  load video file from input field
                function getVideo() {
                    var fileURL = document.getElementById("videoFile").value; // get input field                    
                    if (fileURL != "") {
                        video.src = fileURL;
                        video.load();  // if HTML source element is used
                        document.getElementById("play").click();  // start play
                    } else {
                        errMessage("Enter a valid video URL");  // fail silently
                    }
                }


                //  button helper functions 
                //  skip forward, backward, or restart
                function setTime(tValue) {
                    //  if no video is loaded, this throws an exception 
                    try {
                        if (tValue == 0) {
                            video.currentTime = tValue;
                        }
                        else {
                            video.currentTime  = tValue;
                        }

                    } catch (err) {
                        // errMessage(err) // show exception
                        errMessage("Video content might not be loaded");
                    }
                }

                // change volume based on incoming value 
                function setVol(value) {
                    var vol = video.volume;
                    vol  = value;
                    //  test for range 0 - 1 to avoid exceptions
                    if (vol >= 0 && vol <= 1) {
                        // if valid value, use it
                        video.volume = vol;
                    } else {
                        // otherwise substitute a 0 or 1
                        video.volume = (vol < 0) ? 0 : 1;
                    }
                }
                //  button events               
                //  Play
                document.getElementById("play").addEventListener("click", vidplay, false);
                //  Restart
                document.getElementById("restart").addEventListener("click", function () {
                    setTime(0);
                }, false);
                //  Skip backward 10 seconds
                document.getElementById("rew").addEventListener("click", function () {
                    setTime(-10);
                }, false);
                //  Skip forward 10 seconds
                document.getElementById("fwd").addEventListener("click", function () {
                    setTime(10);
                }, false);
                //  set src == latest video file URL
                document.getElementById("loadVideo").addEventListener("click", getVideo, false);

                // volume buttons
                document.getElementById("volDn").addEventListener("click", function () {
                    setVol(-.1); // down by 10%
                }, false);
                document.getElementById("volUp").addEventListener("click", function () {
                    setVol(.1);  // up by 10%
                }, false);

                // playback speed buttons
                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);

                //  any video error will fail with message 
                video.addEventListener("error", function (err) {
                    errMessage(err);
                }, true);

                // content has loaded, display buttons and set up events
                video.addEventListener("canplay", function () {
                    document.getElementById("buttonbar").style.display = "block";
                }, false);

                //  display video duration when available
                video.addEventListener("loadedmetadata", function () {
                    vLength = video.duration.toFixed(1);
                    document.getElementById("vLen").textContent = vLength; // global variable
                }, false);

                //  display the current and remaining times
                video.addEventListener("timeupdate", function () {
                    //  Current time  
                    var vTime = video.currentTime;
                    document.getElementById("curTime").textContent = vTime.toFixed(1);
                    document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
                }, false);
                //  paused and playing events to control buttons
                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) {
                        // if muted, show mute image
                        document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />"
                    } else {
                        // if not muted, show not muted image
                        document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />"
                    }
                }, false);
                //  Download and playback status events.
                video.addEventListener("loadstart", function () {
                    document.getElementById("ls").textContent = "Started";
                }, false);
                video.addEventListener("loadeddata", function () {
                    document.getElementById("ld").textContent = "Data was loaded";
                }, false);

                video.addEventListener("ended", function () {
                    document.getElementById("ndd").textContent = "Playback ended";
                }, false);

                video.addEventListener("emptied", function () {
                    document.getElementById("mt").textContent = "Video reset";
                }, false);

                video.addEventListener("stalled", function () {
                    document.getElementById("stall").textContent = "Download was stalled";
                }, false);
                video.addEventListener("waiting", function () {
                    document.getElementById("waiting").textContent = "Player waited for content";
                }, 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 = "Duration has changed";
                }, false);

                video.addEventListener("canplaythrough", function () {
                    document.getElementById("cpt").textContent = "Ready to play whole video";
                }, false);

            } else {
                errMessage("HTML5 Video is required for this example");
                // end of runtime
            }
            //  display an error message 
            function errMessage(msg) {
                // displays an error message for 5 seconds then clears it
                document.getElementById("errorMsg").textContent = msg;
                setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
            }
        }// end of master         
    </script>
    
    </head>
    <body >        

    <div id= "inputField" style="display:none;" >
        <label>Type or paste a video URL: <br/>
        <input type="text" id="videoFile" style="width: 800px;"  title="video file input field" value="http://122.49.42.198/transcode-qt.mp4" />        
        <button id="loadVideo" title="Load video button" >Load</button>
        </label>
    </div>    
    <video id="Video1" controls style="border: 1px solid blue;" width="800" title="video element">      
         HTML5 Video is required for this example
    </video>
    
    <div id="buttonbar" style="display: none; font-size:larger;")>
        <button id="restart" title="Restart button">[]</button> 
        <button id="slower" title="Slower playback button">-</button>
        <button id="rew" title="Rewind button" >&lt;&lt;</button>
        <button id="play" title="Play button">&gt;</button>
        <button id="fwd" title="Forward button" >&gt;&gt;</button>
        <button id="faster" title="Faster playback button"> </button>
        <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>     
        <br />
        <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>           
        <br />
        <label>  Volume: </label>
            <button id="volDn"  title="Volume down button">-</button>
            <button id="volUp"  title="Volume up button"> </button>
        <br />
        <div id="status" >Length(seconds): <span id="vLen"></span> <br />
        Current time:  <span id="curTime" title="Current time"></span><br />   Remaining time: <span id="vRemaining" title="Remaining time"></span></div>
    </div>   
    <br/>  

    <div title="Error message area" id="errorMsg" style="color:Red;"></div>  
    <div title="Event status area" >
      <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>


标签: HTML5 HTML

实例下载地址

Html5 播放网络视频示例 Video

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警