我已经将示例 AMP 视频的源保存在本地 http://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html 并尝试播放视频。它适用于IE和Edge,但不适用于chrome。如果我托管此文件,它可以工作。你能帮我了解这里出了什么问题吗?您可以尝试在IE和Chrome中运行脚本以查看差异。
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skill Cloud</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Skill Cloud</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "100%",
height: "auto",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
谢谢
当您在本地运行代码时.html Chrome 会使用 file://协议打开您的索引。由于 Chrome 的安全政策,不允许加载本地资源,这就是阻止播放的原因。(如果你查看你的JavaScript控制台,我敢打赌你会看到类似的错误。
要解决此问题,您可以使用像Visual Studio或WebMatrix这样的IDE,它将自动为您设置本地Web服务器,以便您可以使用 http://localhost:8000 或您喜欢的任何端口访问您的页面。
如果你不想使用VS或WebMatrix,你也可以使用Python的Simple HTTP服务器。希望这有所帮助,并且很高兴编码:)
如果您需要在本地运行,那么您可以将 http 替换为 https,而无需在本地下载它。
例如:
<link href="https://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
还需要更换
myPlayer.src([{ src: "https://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
这至少对我有用,快乐编码!