jQuery.media.js是一個非常有用的插件，它可以使用HTML5 video標簽在網頁中播放視頻，同時也能夠兼容不支持HTML5的瀏覽器。
其中mp4作為一種常用的視頻格式，也可以很好的被jQuery.media.js所支持。我們只需要在HTML代碼中添加以下片段：
<video src="video.mp4" controls></video>
該代碼將會在頁面中呈現一個可控制的mp4視頻播放器。同時，我們還可以使用jQuery.media.js自定義播放器的樣式，添加各種功能按鈕等。下面是一個簡單的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery.media.js MP4 demo</title>
<!-- 引入jQuery和jQuery.media.js插件 -->
<script src="jquery.min.js"></script>
<script src="jquery.media.js"></script>
<!-- 自定義CSS樣式 -->
<link rel="stylesheet" href="jquery.media.css">
</head>
<body>
<div class="player">
<!-- 添加mp4視頻播放器 -->
<video src="video.mp4"></video>
<!-- 添加功能按鈕 -->
<div class="controls">
<button class="play">播放</button>
<button class="pause">暫停</button>
</div>
</div>
<script>
// 使用jQuery.media.js自定義播放器
$('.player video').media({
// 自定義播放器樣式
width: 640,
height: 360,
// 添加播放功能按鈕
playPauseSelector: '.play, .pause',
playText: '播放',
pauseText: '暫停',
// 自動播放
autoPlay: true
});
</script>
</body>
</html>通過以上代碼，我們可以自定義一個簡單的mp4視頻播放器，為用戶提供更好的視頻觀看體驗。
上一篇css 上下滑屏效果
下一篇css 上下左右順序