视频格式在页面展示

第一种：.mp4格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video格式demo</title>
</head>
<body>

<!--视频路径：-->
    <h1>video</h1>
    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="controls">
    </video>

    <h1>embed</h1>
    <embed src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="800" height="510"/>

    <h1>object</h1>
    <object width="800" height="510">
        <param id="video_value" name="movie" value=""></param>
        <param name="allowScriptAccess" value="always"></param>
        <param name="wmode" value="transparent"></param>
        <embed src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="800" height="510" allowFullScreen="true" wmode="transparent" allowScriptAccess="always"></embed>
    </object>

    <h1>iframe</h1>
    <iframe frameborder="0" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" allowfullscreen></iframe>


</body>
</html>

第二种：各大门户网站的分享通用代码(注意插入网页请求时，https与http兼容情况)



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各大视频网站通用代码</title>
</head>
<body>
<h1>腾讯</h1>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0031p73m0p" allowFullScreen="true" width="800" height="510"></iframe>
<h1>爱奇艺</h1>
<iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=9657dcdbaeab8a2147cdf0757ca247bd&tvId=3325765400&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="800" height="510"></iframe>
<h1>优酷</h1>
<iframe src='http://player.youku.com/embed/XNDIyMjQ5Njc4MA==' frameborder=0 'allowfullscreen' width="800" height="510"></iframe>
<h1>网易公开课</h1>
<object width="640" height="360"><param name="movie" value="//open.163.com/openplayer/-MBM8NF28C-MBM8NT807-http://open-image.nosdn.127.net/9c6ee8d9cd17487f8ce775de75b5d91b.jpg-openPlayer.swf?isUserAutoPlay=1"></param><param name="allowScriptAccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="//open.163.com/openplayer/-MBM8NF28C-MBM8NT807-http://open-image.nosdn.127.net/9c6ee8d9cd17487f8ce775de75b5d91b.jpg-openPlayer.swf?isUserAutoPlay=1" type="application/x-shockwave-flash" width="800" height="510" allowFullScreen="true" wmode="transparent" allowScriptAccess="always"></embed></object>
</body>
</html>




问题报错：参考：https://blog.csdn.net/w377120838/article/details/80590053


当https 连接中包含加载http资源时，浏览器会停止加载，浏览器console 会打印如下信息：

Mixed Content: The page at 'https://Xie.cn/' was loaded over HTTPS, but requested an insecure resource 'http://xm/m/vYby6nm?mobile=1'. This request has been blocked; the content must be served over HTTPS.
解决方案一：

在html文件的head标签中添加<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"

当浏览器支持“upgrade-insecure-requests”属性时，会自动将http链接替换为https

解决方案二：

将连接中的算有http连接更换为https

而对于移动端，<embed >标签是不支持的 






		

		
posted @ 
2019-07-16 14:24 
进阶仙女 
阅读(1456) 
评论(0) 
编辑 
收藏 
举报