⑴ html5如何實現自動播放視頻

HTML5 是下一代的 HTML， 提供了展示視頻的標准，規定了一種通過 video 元素來包含視頻的標准方法。

純H5頁面在手機端中是無法實現自動播放，移動端瀏覽器大部分是禁用video和audio的autoplay功能並且，很多移動瀏覽器也不支持首次js調用play方法進行播放（只有用戶手動點播放後暫停，然後用代碼進行play可以）。

這樣做主要是為了防止不必要的自動播放浪費流量。

以下代碼是實現用戶第一次觸摸後實現的播放和微信app下自動播放

XML/HTML Code復制內容到剪貼板

  • functionautoPlayMusic(){

  • /*自動播放音樂效果，解決瀏覽器或者APP自動播放問題*/

  • functionmusicInBrowserHandler(){

  • musicPlay(true);

  • document.body.removeEventListener('touchstart',musicInBrowserHandler);

  • }

  • document.body.addEventListener('touchstart',musicInBrowserHandler);

  • /*自動播放音樂效果，解決微信自動播放問題*/

  • functionmusicInWeixinHandler(){

  • musicPlay(true);

  • document.addEventListener("WeixinJSBridgeReady",function(){

  • musicPlay(true);

  • },false);

  • document.removeEventListener('DOMContentLoaded',musicInWeixinHandler);

  • }

  • document.addEventListener('DOMContentLoaded',musicInWeixinHandler);

  • }

  • functionmusicPlay(isPlay){

  • varmedia=document.getElementById('myMusic');

  • if(isPlay&&media.paused){

  • media.play();

  • }

  • if(!isPlay&&!media.paused){

  • media.pause();

  • }

  • }

Video有以下的屬性。

height pixels 設置視頻播放器的高度。

loop loop 如果出

現該屬性，則當媒介文件完成播放後再次開始播放。

preload preload 如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。

autoplay autoplay 如果出現該屬性，則視頻在就緒後馬上播放。

controls controls 如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。

如果使用 "autoplay"，則忽略該屬性。

src url 要播放的視頻的 URL。

width pixels 設置視頻播放器的寬度。

其中，如果想要實現自動播放，可以在Video裡面加上autoplay屬性就可以了。

⑵ html中怎麼插入本地mp4格式的視頻。求解額

<videowidth="320"height="240"controls="controls">
<sourcesrc="movie.ogg"type="video/ogg">
<sourcesrc="movie.mp4"type="video/mp4">
你的抄瀏覽襲器不支持video標簽
</video>

⑶ HTML5中 使用video標簽 播放本地視頻

1、新建一個html文件，命名為test.html，用於介紹如何使用video控制視頻。

⑷ 求html中插入MP4視頻播放的代碼或者其他的HTML中視頻播放編輯語言

如題了。我不會輸出模擬出來產品結果的恩式蒸餾圖和原來標定的值比較的。請求大家幫我了

⑸ 如何使用html5播放視頻

1、<video src="hangge.mp4" controls></video>1

2，通過width和height設置視頻窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>1

3，預載入媒體文件
設置preload不同的屬性值，可以告訴瀏覽器應該怎樣載入一個媒體文件：
（1）值為auto：讓瀏覽器自動下載整個文件
（2）值為none：讓瀏覽器不必預先下載文件
（3）值為metadata：讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）
<!-- 用戶點擊播放才開始下載 --><video src="hangge.mp4" controls preload="none"></video>12

4，自動播放
（1）使用autoplay屬性可以讓瀏覽器載入完視頻文件後立即播放。
<video src="hangge.mp4" controls autoplay></video>1

（2）如果啟用自動播放，可以將播放器設置為muted狀態。這樣自動播放時會靜音，防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。
<video src="hangge.mp4" controls autoplay muted></video>1

5，循環播放
使用loop屬性讓視頻播放結束時，再從頭開始播放。
<video src="hangge.mp4" controls loop></video>1

6，設置替換視頻的圖片（封面圖片）
通過poster屬性可以設置，瀏覽器在下面三種情況下會使用這個圖片：
（1）視頻第一幀未載入完畢
（2）把preload屬性設置為none
（3）沒有找到指定的視頻文件
<video src="hangge.mp4" controls poster="hangge.png"></video>1

7，瀏覽器兼容，如何讓每一個瀏覽器都能順利播放視頻
現在大部分瀏覽器都能支持H.264格式的視頻，但Opera瀏覽器卻一直不支持。我們需要通過後備措施保證每個人都能看到視頻，通常有下面幾種方案：
（1）使用多種視頻格式
<video>和<audio>元素有個內置的格式後備系統。我們不使用src屬性，而是在其內部嵌套一組<source>元素，瀏覽器會選擇播放第一個它所支持的文件。
我們可以添加WebM格式的視頻提供對Opera的支持。
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>1234

（2）添加Flash後備措施（推薦）
上面那個方法不推薦，應為Opera瀏覽器只佔不到1%的份額。特意為它把視頻都轉碼一邊太費事。使用Flash作為備用播放方案還是很方便的，同時Flash還能兼容IE8這種連<video>元素都不支持的老瀏覽器。
這里使用Flowplayer Flash作為備用播放器（本地下載 ：flowplayer-3.2.18.zip）
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">

<object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
</object>
</video>1234567891011

（3）也有人優先使用Flash，而HTML5作為後備措施。
這么做是因為Flash普及率比較高，而HTML5作為後備可以擴展iPad和iPhone用戶
<object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>

<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>
</object>

⑹ 如何在html代碼中插入MP4格式的視頻

代碼如下，測試過，可用。

<body>

<div style="text-align:center;">

<video id="video1" width="420" style="margin-top:15px;">

<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />

<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />

</video>

</div>

</body>

HTML5 Audio/Video 方法

拓展資料

HTML5 <video> 元素同樣擁有方法、屬性和事件。

其中專的方法用於屬播放、暫停以及載入等。

其中的屬性（比如時長、音量等）可以被讀取或設置。

其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。

⑺ 網頁製作怎麼加MP4，用HTML代碼

隨著的推出，視頻標簽與現代瀏覽器很好的支持很快傳播出去。視頻標簽用於視頻添加到HTML頁面。 目前最大的 HTML5視頻標簽, 支持3種類型的視頻文件：

  • mp4 - MIME-type video/mp4

  • webm - MIME-type video/webm

  • ogg - MIME-type video/ogg

⑻ 怎樣在html中播放視頻

1、你可以使用html5的video標簽，缺點是不支持低版本IE
2、可以使用播放器插件，如ckplayer、jPlayer等。
3、使用優酷等視頻網站的播放代碼

⑼ 瀏覽器兼容 htmlmp4視頻播放

找相應的js的播放器抄，會對應各種瀏覽器生成不同的代碼。例如我之前用過一個「Mediaelement」，或者video-js也行。
或者的話，你直接把視頻傳到優酷之類的網站。然後調用就可以了。裡面有分享直接調用 html可以

⑽ html支持mp4播放該怎麼寫

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>

詳細請看http://www.runoob.com/html/html5-video.html