Heim > Artikel > Web-Frontend > Verwenden Sie das Videoelement, um einen Videoplayer in HTML 5 zu erstellen

Verwenden Sie das Videoelement, um einen Videoplayer in HTML 5 zu erstellen

零下一度Original: 2017-05-19 16:48:103651Durchsuche

Ich lese kürzlich HTML5. Der Titel des Buches lautet „HTML5&API Web Programming“. Das Buch habe ich hier verwendet. Das Videoelement ist sehr einfach. Solange Sie die Adresse des Videos in das Textfeld eingeben und auf die Schaltfläche „Abspielen“ klicken, wird das Video abgespielt neu geladen. Der Code lautet wie folgt:

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

2 🎜> [Verwandte Empfehlungen] 1. Die Lösung für das Problem, dass das H5-Video-Tag nur Ton, aber kein Video abspielen kann

Verwenden Sie das Videoelement, um einen Videoplayer in HTML 5 zu erstellen 2.

IIS MIME hat den MP4-Typ nicht registriert. Lösung für die Unfähigkeit, das Video-Tag zu erkennen

3.Beispiele für die Erstellung von Bannern mit HTML5Überblick über die Leistungsfähigkeit und zukünftige Entwicklung von HTML5

5. Einführung in die Verwendung der neuesten h5-Tag-Datalis

Das obige ist der detaillierte Inhalt vonVerwenden Sie das Videoelement, um einen Videoplayer in HTML 5 zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Grafikbeispiel für die HTML5-AudiowiedergabeNächster Artikel：Grafikbeispiel für die HTML5-Audiowiedergabe

In Verbindung stehende Artikel

Mehr sehen