六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 149|回复: 0

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

[复制链接]

升级  8%

14

主题

14

主题

14

主题

秀才

Rank: 2

积分
62
 楼主| 发表于 2013-1-24 06:43:34 | 显示全部楼层 |阅读模式
最近在看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"  value="播放"/></body></html> 建议使用谷歌浏览器浏览,看看运行的效果吧
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表