Utilisez l'élément vidéo pour créer un lecteur vidéo en HTML 5-Tutoriel H5-php.cn

Utilisez l'élément vidéo pour créer un lecteur vidéo en HTML 5

零下一度

Libérer： 2017-05-19 16:48:10

original

3650 Les gens l'ont consulté

Je lis html5 récemment Le titre du livre est "html5&API Web Programming". le livre. Je l'ai utilisé ici L'élément vidéo est très simple Tant que vous mettez l'adresse de la vidéo dans la zone de texte et cliquez sur le bouton de lecture, la vidéo peut être lue. Lorsque vous cliquez pour mettre en pause, la vidéo sera lue. rechargé. Le code est le suivant :

<!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>

Copier après la connexion