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



本文转自shenzhoulong  51CTO博客,原文链接:http://blog.51cto.com/shenzhoulong/485217,如需转载请自行联系原作者

相关文章
|
2天前
|
前端开发 开发者
|
4天前
|
JavaScript 前端开发
VSCode .vue 文件 html css 无智能提示
VSCode .vue 文件 html css 无智能提示
15 0
|
5天前
|
前端开发 开发者
|
5天前
|
前端开发 JavaScript 开发者
|
6天前
|
前端开发 编译器 Linux
JavaWeb第二章:HTML和CSS的知识制作静态网页
JavaWeb第二章:HTML和CSS的知识制作静态网页
42 0
|
7天前
|
人工智能 前端开发 JavaScript
学习前端开发,能抛弃HTML和CSS吗?
学习前端开发,能抛弃HTML和CSS吗?
|
12天前
|
前端开发
html和css进阶小练习
html和css进阶小练习
|
12天前
|
编解码 前端开发 JavaScript
html和css进阶
html和css进阶
|
12天前
|
前端开发
HTML和css入门作业
HTML和css入门作业
|
19天前
|
移动开发 前端开发 HTML5
HTML+CSS-项目:学成在线
HTML+CSS-项目:学成在线
24 0
相关产品
云迁移中心
相关实验场景
更多
推荐文章
更多