溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html 5簡易的影片播放器

發(fā)布時間:2020-06-15 17:32:54 來源:網(wǎng)絡 閱讀:1818 作者:shenzhoulong 欄目:移動開發(fā)

最近在看html5,書名是《html5&API網(wǎng)頁程序設計》,看著書做的demo,這里使用的是video元素,非常簡單,只要你把影片的地址放在文本框中點擊播放按鈕就可以實現(xiàn)影片的播放,當點擊暫停時影片會重新加載。代碼如下:

<!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");
    
//影片不為播放狀態(tài)
    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>

建議使用谷歌瀏覽器瀏覽,看看運行的效果吧

html 5簡易的影片播放器 

 繼續(xù)改善ing

 

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

AI