`
wjlgryx
  • 浏览: 308530 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5 – Video

HTML5FlashAndroidjQueryJavaScript 
阅读更多

在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。

現在就連 YouTube 也已經測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但了解一下新技術是有其必要的。

 

 html5_video

HTML 5  Video 基礎

基本的 HTML5 Video 標記如下，我們可以透過 src 屬性來標明影片的URL：

view plaincopy to clipboardprint?
  1. <video src=影片URL >很抱歉！您的瀏覽器不支援HTML5 Video</video>  

雖然上面的方式很簡短，但可惜的是因為目前各家瀏覽器在HTML5 Video的影片格式方面支援不一致，而導致我們若我們想要影片能夠兼容各種主流瀏覽器，我們必須提供這兩種主要的HTML5 Video 格式的影片檔案：

  • Theora/Vorbis (*.ogg ; *.ogv)
  • H.264 / AAC (*.mp4 ; *.m4v)

所以我們必須提供兩種格式讓瀏覽器自行依照自己支援的格式下載並播放，因此我們加入 <source> 來定義多個影片來源，而不是用 <video> 的 src 屬性，例如：

view plaincopy to clipboardprint?
  1. <video>  
  2.     <source src="video.ogg">  
  3.     <source src="video.m4v">  
  4.     很抱歉！您的瀏覽器不支援HTML5 Video  
  5. </video>  

<video> 的屬性

<video> 除了可以使用 src 屬性來標明影片的URL，我們還可以使用其他的屬性來定義 <video> 的基本樣式或行為。

src

影片的URL。

autoplay

影片是否自動播放，預設為 false。

controls

是否顯示播放控制列，若設定為ture將會顯示播放控制列，這個控制器的樣式是依據瀏覽器而定的，預設為 false。

width

<video> 所佔寬度。

height

<video> 所佔高度。

poster

這如同一些以Flash實現的播放器所提供的「預覽圖」功能一樣，可於此指定預覽圖的URL，當影片尚未開始播放時，將會先顯示這裡所指定的圖片。

其他的屬性

<video>的屬性還有 loopend / loopstart / playcount / start / end / loop 但這些屬性的各個瀏覽器的支援不一，因此目前不是很實用。

簡單的範例

以下的範例會在頁面載入完成後自動播放，並顯示瀏覽器內建的影片播放控制列，在載入完成並播放之前將會顯示所指定的預覽圖。

view plaincopy to clipboardprint?
  1. <video id="myvideo" autoplay controls poster="preview.png" >  
  2.     <source src="video.ogg">  
  3.     <source src="video.m4v">  
  4.     很抱歉！您的瀏覽器不知員HTML5 Video  
  5. </video>  

<video> 與瀏覽器的支援

目前HTML5的 <video> 僅於以下瀏覽器版本支援：

Chrome4+ / Firefox 3.5+ / Opera 10.5+ / IE 9+ / Safari 4+

以及以下Mobile平台：

iPhone / iPod / iPad / Android OS

替代性的解決方案

在過度時期我們可以使用 video4all 這個開源專案讓更多瀏覽器版本也能支援<video>。

透過 video4all 我們只需要於HTML中加入它所提供的Javascript Library。

<script src="video4all.js" type="text/javascript"></script>

接著我們就可以正常的使用 <video> ，當訪客的瀏覽器不支援 <video> 時 video4all 會自動幫我們將<video>替換成使用Flash的播放器來播放所指定的影片。

view plaincopy to clipboardprint?
  1. <video>  
  2.   <source src="video.ogg" type="video/ogg" />  
  3.   <source src="video.mp4" type="video/mp4" />  
  4. </video>  

HTML5 Video 成員

在HTML5中我們可以透過 Video所提供的屬性以及方法來控制影片的播放與取得播放資訊。

play()

開始播放影片。

pause()

影片暫停播放。

currentTime

numeric 目前的播放指標。

readyState

影片讀取狀態。

  • HAVE_NOTHING = 0
  • HAVE_METADATA = 1
  • HAVE_CURRENT_DATA
  • HAVE_FUTURE_DATA = 2
  • HAVE_ENOUGH_DATA = 3

paused

boolean 是否停止

muted

boolean 是否為靜音。

volume

numeric 取得或設定音量值。

ended

boolean 播放指標是否已經到最後。

搭配jQuery的簡單HTML5 Video 控制範例

請點我觀看範例

simple.html

view plaincopy to clipboardprint?
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4. padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; font-weight: inherit; font-style: inherit; font-size: 12px; font-family: inherit; vertical-align: baseline; background-color: #f8f8f8; color: #5c5c5c;
    分享到：
    | 超過 23 個開源的 HTML5 影音播放器與框架
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

相关推荐

    HTML5 – Web开发步入新阶段

    5. **音频和视频支持**：和&lt;video&gt;元素使得内嵌音频和视频文件变得简单，开发者可以直接控制播放、暂停、音量等属性，无需第三方插件如Flash。 6. **Web Workers**：通过后台线程，Web Workers可以在不阻塞用户界面...

    ＨＴＭＬ５　ＵＩ　Melon5

    HTML5 UI Melon5是一款专为开发者设计的高效、易用的前端框架，它提供了完备的整套用户界面，能够帮助开发者快速构建优美且响应式的Web应用。在现代Web开发中，HTML5技术的广泛应用使得网页能更好地适应各种设备，...

    IE支持html5脚本插件

    让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会...

    DPlayer一个HTML5弹幕视频播放器

    在DPlayer中，HTML5的`&lt;video&gt;`标签用于嵌入视频内容，通过JavaScript进行控制和操作。与早期的Flash技术相比，HTML5视频具有更好的跨平台兼容性和性能，且无需额外插件。 **JavaScript开发** DPlayer的实现离不开...

    在3天内学习HTML 5 –第2天–第2部分

    【标题】"在3天内学习HTML 5 –第2天–第2部分"的教程主要聚焦于HTML5的核心技术和实战应用，这是针对初学者快速掌握网页开发基础的系列课程。在HTML5的学习中，我们关注的是如何创建更加互动、功能丰富的网页内容。...

    Web_Video_Caster_Premium_v5.0.3.apk

    如果该视频无法在您的移动设备上的Chrome上播放（因为它不是HTML5），那么它将无法与该Chromecast设备一起使用，而且并非所有适用于移动Chrome的视频都可以在该Chromecast中使用，因为它的功能受到限制支持的格式数...

    HTML5 and CSS3 Transition, Transformation, and Animation

    Explore the main features of HTML5 such as canvas, offline web application, geolocation, audio and video elements, and web storage Master the tools and utilities in HTML5 and CSS3 In Detail HTML5 and ...

    HTML5 学习应用

    2. **多媒体支持**：HTML5引入了内置的音频和视频&lt;video&gt;标签，使得在网页中嵌入多媒体内容变得更加简单，不再依赖Flash等第三方插件。同时，提供了controls属性来控制播放、暂停、音量等操作。 3. **Canvas画布**...

    UMotion Pro – Animation Editor v1.26p04

    UMotion “In Practice” – Video Tutorials Please note that animating is a creative process that will require some practice in order to create good results. UMotion’s learning material is designed ...

    HTML5 and CSS3 for the Real World

    ### HTML5与CSS3在实际应用中的关键技术点 #### 一、HTML5与CSS3简介 本书《HTML5 & CSS3 for the Real World》由Alexis Goldstein、Louis Lazaris和Estelle Weyl共同撰写，是一本面向实践的指南书籍，旨在帮助...

    复习基础1–HTML5

    HTML5是现代网页开发的核心，它引入了许多新特性以提升用户体验和开发者的工作效率。本文将主要探讨HTML5的语义特性以及本地存储机制。 首先，HTML5的语义特性是其核心改进之一。这一特性旨在使网页内容更具结构性...

    基于vue-video-player自定义播放器的方法

    先看一下效果。 图1–显示侧边栏 图2-收起侧边栏； 图三：全屏。 ...本次项目中需要用到vue，vue-video-player，我用的是...video.js文档地址：http://docs.videojs.com/docs/api/player.html。 项目目录： 一、外层ui

    HTML5新标签兼容—— !–if lt IE 9!endif– 的两种方法

    在HTML5中，新增了许多语义化标签，如`&lt;header&gt;`, `&lt;nav&gt;`, `&lt;article&gt;`, `&lt;aside&gt;`等，这些标签对于提高网页结构的可读性和SEO优化有着重要作用。然而，这些新标签在旧版本的Internet Explorer（尤其是IE8及以下...

    海康威视直播 海康直播 网络摄像机直播

    4. 播放视频：利用HTML5的video标签或者插件提供的播放器控件，展示实时视频。 5. 错误处理：考虑到网络不稳定等因素，需要编写错误处理代码，以应对可能出现的连接中断或播放异常。 总的来说，海康威视直播技术...

    html5.vim：HTML5全能和语法

    HTML5是现代网页开发的核心，它引入了许多新特性，增强了网页的交互性和表现力。`html5.vim` 是一个针对Vim编辑器的插件，旨在为开发人员提供全面的HTML5语法高亮和自动补全功能，提高编写HTML5代码的效率。 **...

Magicbox
Global site tag (gtag.js) - Google Analytics