Blog插入视频

最新推荐文章于 2025-06-27 08:02:44 发布
原创 最新推荐文章于 2025-06-27 08:02:44 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Small-Talk

视频效果如下

src="http://player.youku.com/embed/XMTcyNDUxMjc5Mg==" allowfullscreen="" width="510" height="498" frameborder="0">

从网页的优酷中获取链接代码

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTcyNDUxMjc5Mg==' frameborder=0 'allowfullscreen'></iframe>

、 


在优快云下切换到HTML源代码格式下并粘贴之前复制的代码




切换回html模式下，即可看到视频，并进行博客的常规编辑,也可在该模式下用html编辑


语言进行编写






                

        

    

    
  



    



                



	

		

			

				
					
Markdown在VScode编辑器下插入视频

				
			

			

				

					**My Coding Family**
				

				

					01-11
					
					982
					
				

			

		

		

			
				
🏆本文收录于专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家！持续更新中，up！up！up！！

			
		

	



                

            
              



	

		

			

				
					
在Hexo搭建的博客中插入音乐或者视频

				
			

			

				

					倚马古道
				

				

					04-25
					
					5228
					
				

			

		

		

			
				
原文地址在Hexo搭建的博客中插入音乐或者视频
用hexo搭建博客后，记录了自己生活和学习中的很多事情。今天偶然想到能不能在博客中插入音乐和视频呢？然后就开始了今天的历程。。。。

hexo-tag-aplayer
hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件（现已支持 MetingJS）。
安装
npm install --save hexo-tag-aplaye...

			
		

	



              


  
              

                


	

		

			

				
					
Html插入视频

				
			

			

				

					03-09
				

			

		

		

			
				
Html插入视频

			
		

	





	

		

			

				
					
插入视频

				
			

			

				

					Donnnies的博客
				

				

					09-26
					
					883
					
				

			

		

		

			
				
插入视频可以使用、>或者标签。




使用  标签


问题

HTML4 无法识别  标签。您的页面无法通过验证。如果浏览器不支持 Flash，那么视频将无法播放iPad 和 iPhone 不能显示 Flash 视频。如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

			
		

	



		

			
		



	

		

			

				
					
发布一个小功能，通过 markdown 图片语法嵌入B站视频

					
最新发布

				
			

			

				

					weixin_55010563的博客
				

				

					06-27
					
					113
					
				

			

		

		

			
				
今天晚上对园子的 markdown 功能做了一个小改进，方便大家在博文中嵌入B站视频，已发布上线。发布一个小功能，通过 markdown 图片语法嵌入B站视频。

			
		

	





	

		

			

				
					
在页面插入视频

				
			

			

				

					yuyongyu08的博客
				

				

					08-01
					
					422
					
				

			

		

		

			
				

这周的主要问题是：将原来公司的wordpress网站上的一个视频替换掉（原因：原来的视频时通过链接直接连接到腾讯视频，有水印，带广告）
 
解决方案：
一、通过直接页面嵌入flash播放器
原因：wordpress不支持HTML5，只好选择flash播放
方案：在页面加入flash播放器，视频资源通过链接载入
代码：
&lt;object type="application/x-s...

			
		

	





	

		

			

				
					
markdown 插入视频  、gif、 MP3

					
热门推荐

				
			

			

				

					mixboot
				

				

					01-16
					
					2万+
					
				

			

		

		

			
				
1.markdown 插入视频



iframe height=498 width=510 src=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;视频地址&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;



iframe height

			
		

	





	

		

			

				
					
扩展FCKeditor的视频插入功能支持多种格式插件 for z-blog.rar

				
			

			

				

					07-14
				

			

		

		

			
				
但好多版本的只有flash插入上传功能，并无其他的格式的，很受限制。解决办法主要有两种，有种是为其增加视频插件，按钮。但这个方法，我试过一次没有成功，但办法可能是有的。另一种办法就是扩展flash上传功能，使其...

			
		

	





	

		

			

				
					
react-markdown-blog：视频教程“使用React构建Markdown博客”的源代码

				
			

			

				

					02-09
				

			

		

		

			
				
这个开源项目是为了配合视频教程，教用户如何使用React、JavaScript以及Markdown语法来创建一个功能齐全的博客平台。下面是该项目的一些关键知识点及详细解释：  1. **React**: React是由Facebook开发的前端...

			
		

	





	

		

			

				
					
使用jekyll include在wechaty博客中快速插入视频

				
			

			

				

					coc_wechaty的博客
				

				

					08-24
					
					126
					
				

			

		

		

			
				
撰写暑期2020中期POC博客的时候，遇到了在博文中插入视频、PPT等iframe的需求，可以在markdown文档中直接使用bilibili等视频网站提供的视频嵌入代码，然而这样视频的样式不够美观，iframe没有铺满整个宽度并保持一定宽高比。

1. 背景

在lijiarui和Huan的建议下，参考之前的博客,应用如下样式插入iframe能够达到较为满意的效果(宽高比为16:9)。
...

			
		

	





	

		

			

				
					
博客系统视频_视频博客| 视频博客

				
			

			

				

					culu1614的博客
				

				

					08-08
					
					853
					
				

			

		

		

			
				
博客系统视频 Videoblog或Vlog (Videoblog or Vlog)
A videoblog, which is pronounced as vlogging (as one word and not as “v logging”) is also called vlogging, vidding, and vlog. Vlog is a kind of weblog put int...

			
		

	





	

		

			

				
					
成功在优快云个人博客插入视频。。。。。

				
			

			

				

					李蓝箫
				

				

					05-06
					
					5249
					
				

			

		

		

			
				
 问题：IE下，在编辑HTML源码方式下，贴了下面这个引用外部视频的代码。结果，在点击了“更新”之后，浏览器报错，在发表之后，完全看不到视频。重新编辑时，那个引用视频的代码也找不到了。      发现这编辑器是ajax的，从开发人员直觉上认为是浏览器兼容问题，使用了火狐浏览器试了一下，结果成功引用。。。。  以下是测试效果：测试1: 测试2: 测试3

			
		

	





	

		

			

				
					
插入视频代码

				
			

			

				

					weixin_30301183的博客
				

				

					04-10
					
					778
					
				

			

		

		

			
				
<embed style="width: 243px; height: 211px" height=211 type=audio/x-pn-realaudio-plugin width=243 src=http://player.youku.com/player.php/sid/XNDY2MTA4MDA0/v.swf autostart="true" controls="imagewindo...

			
		

	





	

		

			

				
					
在优快云上发布视频blog

				
			

			

				

					奋斗在路上的博客
				

				

					03-21
					
					710
					
				

			

		

		

			
				
打开youku，找到视频的id替换如下代码的id部分将代码放入csdn的markdown编辑器中done&lt;iframe height=450 width=600 src="http://player.youku.com/embed/XOTUwMDA5OTc2" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;...

			
		

	





	

		

			

				
					
优快云 MarkDown插入在线视频（该方法已失效）

				
			

			

				

					林海
				

				

					03-07
					
					5423
					
				

			

		

		

			
				
本文主要介绍如何在自己的blog中插入在线视频



一、csdn markdown插入视频代码



&amp;lt;iframe height=498 width=510 src=&quot;http://player.youku.com/embed/XMzQ0NTMwMTEyOA==&quot;&amp;gt;



二、 for example


插入优酷视频

找到要上传的优酷视频，点击分享，接着点击复制通用代码 
 
...

			
		

	





	

		

			

				
					
如何在网页中插入视频（简单实用）

				
			

			

				

					weixin_34163741的博客
				

				

					12-31
					
					2852
					
				

			

		

		

			
				
很多人会问在网页中怎么插入视频，在HTML5中有新标签--video标签，但是兼容性可就没那么好了。
下面这段代码可以直接使用，里面的几个路径注意一下。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/...

			
		

	





	

		

			

				
					
markdown插入视频

				
			

			

				

					04-24
				

			

		

		

			
				
<think>好的，我现在需要回答用户关于如何在Markdown中插入视频的问题。首先，我得回忆一下Markdown的基本语法和相关扩展功能。根据之前的引用资料，用户提到可以嵌入视频的方法包括参考HTML或使用编辑器直接上传[^5]。不过用户现在想知道的是最佳实践，可能需要更详细的步骤和注意事项。

首先，Markdown本身不支持直接插入视频，所以通常需要借助HTML的标签。比如使用`<video>`标签或者嵌入外部视频平台的链接。比如YouTube或Bilibili的iframe嵌入代码。不过用户可能希望了解不同的方法，包括本地视频和在线视频的处理方式。

然后，我需要考虑不同的平台兼容性。例如，GitHub的Markdown渲染器可能会禁用某些HTML标签，而其他平台如Typora可能支持更多功能。引用[4]提到Typora允许在应用内组织文件，可能支持直接上传视频，但具体如何操作呢？可能需要用户将视频文件放在同一目录下，然后使用相对路径引用。

另外，用户可能需要知道如何调整视频的大小、添加控件等属性。这时候使用HTML的`<video>`标签的width、height、controls属性会比较有用。同时，如果用户希望避免使用HTML，可能需要依赖外部链接，比如通过Markdown的图片链接语法，但视频不会自动播放，所以这可能不是最佳选择。

还需要考虑最佳实践，比如推荐使用外部托管服务来节省带宽，或者确保视频格式的兼容性（如MP4、WebM）。同时，提醒用户注意文件路径的正确性和平台限制，比如某些平台可能只允许特定方式的嵌入。

最后，可能需要给出具体的示例代码，比如HTML嵌入和iframe示例，并说明各自的优缺点。同时，引用相关的参考资料，比如引用[5]提到的嵌入视频方法，但需要确认是否符合用户的实际需求。</think>在Markdown中插入视频的常用方法主要有以下两种形式，具体选择取决于视频存储位置和平台兼容性：

---

### 一、通过HTML `<video>`标签（适合本地视频或自托管视频）
Markdown支持直接嵌套HTML标签，可使用以下语法控制视频播放器：
```html
<video src="video.mp4" width="400" controls>
  您的浏览器不支持视频标签
</video>
```
- **关键属性**
  - `src`：视频文件路径（本地相对路径或远程URL），例如：`src="./assets/demo.mp4"`
  - `width`/`height`：控制播放器尺寸
  - `controls`：显示进度条/音量等控件
  - `autoplay`：自动播放（多数浏览器已禁止该功能）
  - `loop`：循环播放

> **注意**：GitHub等平台会禁用HTML视频标签，此时需改用**外部链接引用法**

---

### 二、嵌入第三方平台视频（推荐实践）
通过iframe嵌入YouTube、Bilibili等平台的分享代码：
```markdown
[![视频封面描述](https://img.youtube.com/vi/视频ID/0.jpg)](https://www.youtube.com/watch?v=视频ID)
```
或直接使用iframe（需平台支持）：
```html
<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/视频ID" 
  frameborder="0" 
  allowfullscreen>
</iframe>
```

---

### 最佳实践总结
| 方法 | 适用场景 | 优点 | 缺点 |
|------|----------|------|------|
| HTML标签 | 本地演示、私有部署 | 完全控制播放器样式 | 跨平台兼容性差 |
| 第三方嵌入 | 公开分享、博客/文档 | 自动适配设备、带宽优化 | 依赖外部平台 |
| Markdown链接 | 快速引用 | 语法简单 | 仅显示静态链接 |

---

### 扩展说明
1. **Typora等编辑器的特殊支持**：部分Markdown编辑器支持拖拽上传视频并自动生成HTML代码[^4]
2. **视频格式建议**：优先使用MP4(兼容性广)+WebM(高清压缩)双格式备份
3. **备用方案**：当无法嵌入时，可用图片+超链接组合：
   ```markdown
   [![点击播放视频](封面图链接)](视频URL)
   ```

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值