视频格式在页面展示

时间：2025-02-16 08:18:30

第一种：.mp4格式

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

<!--视频路径：-->
    <h1>video</h1>
    <video src="/big_buck_bunny.mp4" controls="controls">
    </video>

    <h1>embed</h1>
    <embed src="/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="/big_buck_bunny.mp4" width="800" height="510" allowFullScreen="true" wmode="transparent" allowScriptAccess="always"></embed>
    </object>

    <h1>iframe</h1>
    <iframe frameborder="0" src="/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="/txp/iframe/?vid=d0031p73m0p" allowFullScreen="true" width="800" height="510"></iframe>
<h1>爱奇艺</h1>
<iframe src="/developer/player_js/?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='/embed/XNDIyMjQ5Njc4MA==' frameborder=0 'allowfullscreen' width="800" height="510"></iframe>
<h1>网易公开课</h1>
<object width="640" height="360"><param name="movie" value="//open./openplayer/-MBM8NF28C-MBM8NT807-./?isUserAutoPlay=1"></param><param name="allowScriptAccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="//open./openplayer/-MBM8NF28C-MBM8NT807-./?isUserAutoPlay=1" type="application/x-shockwave-flash" width="800" height="510" allowFullScreen="true" wmode="transparent" allowScriptAccess="always"></embed></object>
</body>
</html>
 
 
 
 
问题报错：参考：/w377120838/article/details/80590053
 
 
当https 连接中包含加载http资源时，浏览器会停止加载，浏览器console 会打印如下信息：

Mixed Content: The page at '/' 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 >标签是不支持的 
相关文章