html 5简易的影片播放器(高手绕行）

======================================================
注：本文源代码点此下载
======================================================

html 5简易的影片播放器(高手绕行)

posted on 2011-01-24 22:57 神舟龙 阅读(1989) 评论(9)编辑 收藏

最近在看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:inputtype="text" id="videourl"/>

inputid="playbutton" type="button" οnclick="playorpausevideo()" value="播放"/>

body>

html>

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

继续改善ing

作者:神舟龙

出处:http://www.cnblogs.com/shenzhoulong/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

绿色通道:好文要顶关注我收藏该文与我联系

feedback

#1楼

回复 引用 查看

2011-01-25 00:30 by 漂浮的雨

简单就是最好的

#2楼

回复 引用 查看

2011-01-25 01:31 by nant

发现直接把mp4拖到chrome上就行了,很好,很强大,原生支持就是爽,点击右键查看源代码,全是二进制数据,脱离了插件机制

#3楼[楼主]

回复 引用 查看

2011-01-25 09:22 by 神舟龙

@nant

是的,谷歌就是要吧浏览器作为万能,你还可以在谷歌商店下载很多应用程序

#4楼[楼主]

回复 引用 查看

2011-01-25 09:22 by 神舟龙

@漂浮的雨

谢谢支持哦

#5楼[楼主]

回复 引用 查看

2011-01-25 09:23 by 神舟龙

@dfghtjhr

speak chinese

#6楼

回复 引用 查看

2011-01-25 14:25 by xlay

@神舟龙

speak japanese

#7楼

回复 引用 查看

2011-01-26 00:23 by 三桂

冒昧的问个问题,楼主是在神州龙工作还是昵称就叫神州龙...求解答,囧~

#8楼[楼主]

回复 引用 查看

2011-01-26 09:15 by 神舟龙

我的昵称是叫神舟龙!=神州龙,我也不再什么神州龙工作,只是昵称而已,感觉名字蛮大气的就一直在用

#9楼[楼主]

回复 引用 查看

2011-01-26 09:15 by 神舟龙

@nothing better

(⊙o⊙)哦,别老发广告了,老兄

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新it新闻:

·ios 5.1 beta3文件预示未来 siri有可能支持 ipad和 ipod touch

·android平台12月广告浏览份额51.6% 超越ios

·测试版ios源代码显示ipad 3或将支持siri

·斯蒂芬·霍金的新电脑

·京东商城2.95亿竞得北京商业地一块

» 更多新闻...

最新知识库文章:

·javascript 面向对象编程

·持续集成之“everything is code”

·持续集成之“软件自我识别”

·持续集成之戏说check-in dance

·什么是闭包。
       我的理解

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/