最近在看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
转载于:https://blog.51cto.com/shenzhoulong/485217
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110667.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...