HTML5內嵌視頻已經成為了網頁設計的重要特性之一。除了能夠為網站增加酷炫的視覺效果,還能增強用戶體驗。而JavaScript則可以讓我們實現更多的功能和特效。下面就給大家介紹一下HTML5內嵌視頻代碼js。
<video width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <p>Your browser does not support the video tag.</p> </video>
這是HTML5內嵌視頻的代碼,其中包含了兩個<source>標簽,分別指向了兩個不同的視頻文件,這樣可以保證兼容性更好。如果用戶的瀏覽器不支持HTML5視頻,則<p>標簽中的提示語將會被顯示出來。
接下來,我們可以使用JavaScript來為視頻添加一些交互特效,比如添加控制條、自動播放等功能,代碼如下:
var video = document.getElementById("myVideo"); function playPause() { if (video.paused) { video.play(); } else { video.pause(); } } function makeBig() { video.width = 900; } function makeSmall() { video.width = 320; } function makeNormal() { video.width = 640; }
以上的JavaScript代碼添加了四個功能函數,第一個函數是實現視頻的播放和暫停功能;第二個函數是將視頻的寬度變為900像素;第三個函數是將視頻的寬度變為320像素;第四個函數是將視頻的寬度恢復到默認值640像素。通過在<video>標簽中添加id屬性,即可調用這些函數對視頻添加特效。
總之,HTML5內嵌視頻代碼js的使用,可以讓我們的網頁更加生動、實用。而JavaScript的應用能夠為視頻增加更多的魅力和交互性,為用戶提供更好的使用體驗。
上一篇html5內嵌式設置
下一篇html5內核兼容代碼