移動端H5自動播放視頻

能是出于節省用戶流量，許多移動端瀏覽器都不支持H5自動播放視頻，必須在用戶主動交互（點擊或者滑動等）后才可以通過js播放視頻

PC端可以通過設置muted，自動播放靜音視頻

安卓瀏覽器均不支持自動播放，實測在微信內置瀏覽器，滑動視為交互行為，可以在這之后播放視頻，抖音內置瀏覽器則需要點擊交互，鴻蒙系統瀏覽器可以自動播放靜音視頻

解決方案

法一引導用戶點擊或滑動

進入網站時彈窗，例如歡迎語等，用戶點擊關閉后執行視頻播放
簡單粗暴的方法，在某些場景時適用的，實測在安卓、鴻蒙、IOS、抖音瀏覽器等均可以用這個方法解決

close() {
const videos = document.querySelectorAll('video');
for (let i = 0; i < videos.length; i++) {
const element = videos[i];
element.play();
}
}

【更多音視頻學習資料，點擊下方鏈接免費領取↓↓，先碼住不迷路~】

點擊領取→音視頻開發基礎知識和資料包

法二 jsmpeg

將視頻轉成ts格式，通過jsmpeg解碼器進行加載播放，可以實現自動播放，實測基本上可以解決所有移動端無法播放視頻的問題

轉ts

安裝ffmpeg，輸入命令將mp4轉成ts

s - 分辨率
b - 碼率 b:v代表視頻碼率 b:a代表音頻碼率
r - 幀頻

ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 引入jsmpeg
<script src="./jsmpeg.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" height="750" width="750"></canvas>
<script>
var canvas = document.querySelector("#canvas");
// 加載ts文件
var player = new JSMpeg.Player("./out.ts", {
canvas: canvas,
loop: true, // 循環播放
autoplay: true, // 自動播放
audio: false, // 禁用音頻
});
player.play();
</script>
</body>
</html>

其他問題

移動端自動全屏播放視頻

<video webkit-playsinline="webkit-playsinline" playsinline></video>

如果你對音視頻開發感興趣，覺得文章對您有幫助，別忘了點贊、收藏哦！或者對本文的一些闡述有自己的看法，有任何問題，歡迎在下方評論區討論！

們做安卓開發時，webview中發現html5 視頻的autoplay根本沒實現，查看了下android 源碼HTMLVideoElement.cpp也未見相應處理，網上有資料顯示，這可能關乎UI線程與后臺線程的協調性，我看，以后的升級版本總會解決這個問題的。

html5標簽屬性不支持，那只有通過javascript來處理了

演示apk下載地址：http://download.csdn.net/detail/qiushi_1990/9513038

github源碼下載：https://github.com/qiushi123/H5Demo

下面是實現步驟和原理

一，我們在設置的WebViewClient中覆蓋方法：

不要忘記了webview.getSettings().settings.setJavaScriptEnabled(true)啟用javascript,AndroidManifest加入INTERNET權限

@Override
public void onPageFinished( WebView view, String url) {
view.loadUrl("javascript：try{autoplay();}catch(e){}");
}

實例代碼

 public class Html5VideoAutoPlay extends Activity {
		WebView webview = null;
		@Override
		protected void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);
			setContentView(R.layout.html5video);
			webview = (WebView)findViewById(R.id.webview);
			webview.getSettings().setJavaScriptEnabled(true);
			webview.setWebViewClient(new WebViewClient(){
				/**
				 * 當前網頁的鏈接仍在webView中跳轉
				 */
				@Override
				public boolean shouldOverrideUrlLoading(WebView view, String url) {
					view.loadUrl(url);
					return true;
				}
				/**
				 * 處理ssl請求
				 */
				@Override
				public void onReceivedSslError(WebView view,
						SslErrorHandler handler, SslError error) {
					handler.proceed();
				}
				/**
				 * 頁面載入完成回調
				 */
				@Override
				public void onPageFinished(WebView view, String url) {
					super.onPageFinished(view, url);
					view.loadUrl("javascript：try{autoplay();}catch(e){}");
				}
			});
			webview.setWebChromeClient(new WebChromeClient() {
				/**
				 * 顯示自定義視圖，無此方法視頻不能播放
				 */
				@Override
				public void onShowCustomView(View view, CustomViewCallback callback) {
					super.onShowCustomView(view, callback);
				}
			});
			webview.loadUrl("file:///sdcard/html/video.html");
		}
		@Override
		protected void onPause() {
			if(null != webview) {
				webview.onPause();
			}
			super.onPause();
		}
 }

二，布局文件

html5video.xml

	<?xml version="1.0" encoding="utf-8"?>
		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="match_parent"
					android:layout_height="match_parent"
					android:orientation="vertical" >
		<WebView android:id="@+id/webview"
			android:layout_width="match_parent"
			android:layout_height="match_parent"/>
		</LinearLayout>

三，html文件（這里用的是html5的video標簽來設置自動播放和循環播放）

video.html

		<body>
		<video id="video" src="b.mp4" width="480" height="320" controls loop>
			don't support html5
		</video>
		</body>
		<script type="text/javascript">
			var video = document.getElementById("video");
			video.play();
		</script>

上面的src可以引入本地視頻b.mp4,

也可以引入網上視頻：http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4

個人覺得html5結合Android會讓未來各種技術實現越來越簡單。到我的個人博客查看更多h5與安卓的結合案例。

也可以關注我github里的其他開源項目。

github：https://github.com/qiushi123?tab=repositories

實例圖片

效果圖

有任何關于編程的問題都可以私信我，我看到后會及時解答。

編程小石頭，為分享干貨而生！據說，每個年輕上進，顏值又高的互聯網人都關注了編程小石頭。?

/ Peggy Chi，高級研究員，Irfan Essa，高級工程師，Google研究院

譯者 / Alpha

原文 / https://ai.googleblog.com/2020/10/experimenting-with-automatic-video.html

在Google，我們正在積極探索在制作多媒體內容時，人們如何使用由機器學習和計算方法提供的創造性工具，從創作音樂、重新架構視頻，到繪畫等等都涉及到了這方面內容。尤其是視頻制作這樣一個頗具創意的過程，它可以很好地受益于這些工具，因為它需要做出一系列決策，確定哪些內容最適合目標受眾，如何在視圖中妥善排布現有資源，以及怎樣進行時間安排能夠帶來最具吸引力的描述。但假如一個人能利用現有的資源，比如一個網站，來開啟視頻創作呢？大多數企業主辦的網站都呈現了關于其產品或服務豐富的視圖內容，所有這些內容都可以被重新應用到其他多媒體格式，比如視頻，這可能使那些沒有大量資源的人能夠接觸到更廣泛的受眾。

2020年UIST上發表的“網頁端視頻的自動化制作”里，我們介紹了一種基于內容所有者提供的時間和視圖限制，將網頁自動轉換為短視頻的研究原型——URL2Video。URL2Video從HTML源中提取資源（文本、圖像或視頻）及其設計風格（包括字體、顏色、圖形布局和層次結構），并將這些可視資源組合成一系列的快照，同時保持與源頁面相似的外觀和感覺，然后根據用戶指定的縱橫比和持續時間，將這些材料重新利用，渲染成一個適合產品和服務廣告的視頻。

URL2Video概述

假設用戶提供了一個闡述他們業務的網頁URL，URL2Video會自動從頁面中選擇關鍵內容，并根據一組針對熟悉網頁設計和視頻廣告制作的設計師的訪談研究得到的啟發式算法，決定每個資源的時間和視圖展示。這些如設計師般熟知的啟發式算法捕獲常見的視頻編輯樣式，包括內容層次結構，限制一個快照中的信息量及其持續時間，為品牌提供一致的顏色和樣式等等。利用這些信息，URL2Video解析網頁，分析內容，選擇視覺突出的文本或圖像，同時保留它們的設計風格，并根據用戶提供的視頻規范進行組合。

通過在輸入的網頁中提取結構內容和設計，URL2Video做出自動編輯決策，在視頻中呈現關鍵信息。它考慮到用戶定義的輸出視頻的時間限定（比如以秒為單位的持續時間）和空間限定（比如高寬比）。

網頁分析

一個網頁的URL，URL2Video會提取它的文檔對象模型（DOM）信息和多媒體材料。出于研究模型的目的，我們將域限制在靜態網上，這些頁面包含HTML層次結構中保存的突出資源和標題，這些層次結構遵循最近的網頁設計原則，鼓勵使用重點的元素、更清晰的部分以及引導讀者感知信息的視覺焦點順序。URL2Video將這些視覺上可區分的元素標記到資源組的候選列表，每個元素可能包含一個標題、一個產品圖象、詳細描述和調用操作按鈕，并捕獲每個元素的原始素材（文本和多媒體文件）和詳細的設計規范（HTML標簽、CSS樣式和呈現位置）。然后，通過根據每個資源組的視覺外觀和注釋，包括它們的HTML標簽、呈現的尺寸還有顯示在頁面上的順序對每個組進行排序。這樣，在頁面頂部占據較大區域的資源組將獲得更高的分數。

限定型的資源選擇

在制作視頻時，我們考慮了兩個目標：（1）每個鏡頭都應該提供簡潔的視頻信息；（2）視覺設計應該與源網頁一致。基于這些目標和用戶提供的視頻限定條件，包括預期的視頻持續時間（以秒為單位）和高寬比（通常為16:9、4:3、1:1等），URL2Video自動選擇并命令資源組優化總體優先級分數。為了使內容簡潔，它只顯示頁面中的主要元素，例如標題和一些多媒體資源。它限定了觀眾所感知內容的每個視覺元素的持續時間。這樣，簡短的視頻強調了頁面頂部最突出的信息，時間長一些的視頻則包含了更多的商業活動或產品信息。

畫面構圖與視頻渲染

根據基于DOM層次結構的有序資源列表，URL2Video并行依照從訪談研究中獲得的設計啟發，對時間和空間安排做出決策，將資源在單個鏡頭中展現出來。它將元素的圖形布局轉換為視頻的縱橫比，并應用了包括字體和顏色在內的樣式選擇。為了使視頻更具動感和吸引力，它調整了資源的顯示時間。最后，它將內容渲染為MPEG-4格式的視頻。

用戶控制

研究原型界面允許用戶查看源網頁提取的每個視頻鏡頭中的設計屬性，以及重新排版材料，更改細節設計，如顏色和字體，并更改限制條件來生成新的視頻。

在URL2Video的創作界面（左）中，用戶指定源頁面輸入的URL、目標頁面視圖的大小以及輸出視頻參數。URL2Video分析網頁，并提取主要的視覺組件。由它組成了一系列的鏡頭，并將關鍵畫面可視化為一個故事板。這些組件滿足輸入時間和空間限定后輸出呈現為視頻。用戶可以播放視頻，檢查設計屬性（右下角），并進行調整以做視頻更改，例如重新排序鏡頭（右上）。

URL2Video用例

我們在現有的各種網頁上演示了端到端的URL2Video的性能。下面我們特別展示一個實例結果，其中URL2Video將嵌入多個短視頻剪接的頁面轉換為一個12秒的輸出視頻。請注意它如何在從源網頁面捕獲的視頻中對字體和顏色選擇、時間和內容排序作出自動編輯決定的。

URL2Video從我們的Google搜索介紹頁面（頂部）識別關鍵內容，包括標題和視頻資源。通過綜合考慮顯示流程、源設計和輸出限定，URL2Video將它們轉換為視頻（12秒的橫向視頻；底部）

下面的視頻作了進一步的演示：

https://www.youtube.com/watch?v=3yFYc-Wet8k&feature=youtu.be

為了評估自動生成的視頻，我們與Google的設計師進行了一項用戶研究。實驗結果表明，URL2Video能夠有效地從網頁中提取設計元素，并通過引導視頻創建的過程為設計師提供支持。

下一步

雖然目前的研究集中在視覺展示，但我們正在開發新的技術，以在視頻編輯中支持音軌和畫外音。總之，我們設想的未來是，創作者專注于做出高層決策，而機器學習模型配合其在多個平臺上為最終視頻的制作提供詳細的時間和圖形編輯建議。

致謝

我們非常感謝我們的論文合著者Zheng Sun（Research）和Katrina Panovich（YouTube）。我們還要感謝我們的同事，他們（按姓氏的字幕順序）-JordanCanedy, Brian Curless, Nathan Frey, Madison Le, Alireza Mahdian, Justin Parra,Emily Ryan, Mogan Shieh, Sandor Szego和Weilong Yang-為URL2Video作出了貢獻。我們感謝我們的領導人Tomas Izo, RahulSukthankar和Jay Yagnik的支持。

在線咨詢

上一篇：簡潔手機圖書城小說商城頁面模板
下一篇：「HTML+CSS」html修飾標簽介紹，為頁面元素添加獨立效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商