html 5中使用video元素制作一个影片播放器

零下一度
Lepaskan: 2017-05-19 16:48:10
asal
3669 orang telah melayarinya

最近在看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>
Salin selepas log masuk

2. [图片] QQ截图未命名.png    

html 5中使用video元素制作一个影片播放器

【相关推荐】

1. H5 video标签只能放声音不能放视频的解决办法

2. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

3. 分享HTML5制作Banner的实例

4. 概述HTML5的强大与未来发展

5. 最新的h5标签datalis的使用方法介绍

Atas ialah kandungan terperinci html 5中使用video元素制作一个影片播放器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan