zoukankan      html  css  js  c++  java
  • html 5简易的影片播放器(高手绕行)

    最近在看html5,书名是《html5&API网页程序设计》,看着书做的demo,这里使用的是video元素,非常简单,只要你把影片的地址放在文本框中点击播放按钮就可以实现影片的播放,当点击暂停时影片会重新加载。代码如下:

    <!DOCTYPE html >
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简易影片播放器</title>
    <script type="text/javascript">
    function playOrPauseVideo(){
        var videoUrl
    =document.getElementById("videoUrl").value;
        var video
    =document.getElementById("video");
        
    //影片不为播放状态
        if(video.paused)
        {
            
    //URL改变时,重新加载
        if(videoUrl!=video.src)
        {
            video.src
    =videoUrl;
            video.load();
            }
        
    else
            {
    //播放
                video.play()
                }
            document.getElementById(
    "playButton").value="暂停";
            }
            
    else
            {
                
    //暂停
                video.pause();
                document.getElementById(
    "playButton").value="播放";
                }

        }

    </script>
    </head>

    <body>
    <video id="video" width="400" height="300" autoplay></video><br />
    影片的URL:
    <input  type="text" id="videoUrl"/>
    <input  id="playButton" type="button" onclick="playOrPauseVideo()" value="播放"/>
    </body>
    </html>

    建议使用谷歌浏览器浏览,看看运行的效果吧

     

     继续改善ing

    作者:神舟龙
        
     

    新建的wp開發者群:42182428 

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    JavaScript-警告(alert 消息对话框)
    JavaScript中4种document.write()输出展示
    JavaScript-什么是函数
    JavaScript-判断语句(if...else)
    javascript里面什么是变量
    [学习笔记] IT项目管理
    [学习笔记] IT项目管理
    [学习笔记] Oracle基础增删改查用法
    [学习笔记] Oracle字段类型、建表语句、添加约束
    [学习笔记] RabbitMQ的简单使用
  • 原文地址:https://www.cnblogs.com/shenzhoulong/p/1943581.html
Copyright © 2011-2022 走看看